JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<table class="table" border="0" cellspacing="0">
    <thead>
        <tr>
            <td width="100px">Column 1</td>
            <td width="150px">Column 2</td>
            <td>Column 3</td>
            <td width="30px">#</td>
            <td class="scroll" width="20px"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5">
                <div class="table-content">
                    <table cellspacing="0">
                        <tr><td>Value 1.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 2.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 3.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 4.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 5.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 6.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 7.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 8.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 9.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                        <tr><td>Value 10.1</td><td>Value 2</td><td>Value 3</td><td><a href="#" class="ico edit"></a></td></tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                <div class="table-pager"> 
                    <input type="button" value="<<" />
                    <input type="button"...

CSS

table.table {
    width: 100%;
}

/* tables should expand should fill the container */
.table-content table{
    width: 100%;
}
.table-content{
    height: 150px;
    overflow-y: auto;
}
.table-content tr:hover td{
    background-color: #eee;
}

/* header and footer bg color */
.table thead, 
.table tfoot {
    background-color: #dcdcdc;
}

/* pager styles */
.table-pager{ 
    position: relative;
    text-align: center;
}
.table-pager .currentPage{
    width: 35px;
    text-align: center;
}
.table-pager .table-pager-totals{
    position: absolute;
    top: 0;
    right: 5px;
    padding: 2px;
}



a.ico{
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #f00;
}
a.ico.edit{
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ72G7TflgsBvUkFtdj4smE4gBh9XZnDjJTJdPdOE_mggW7xF9GKA');
}

JavaScript

var adjustColSize = function() {
    $('.table').each(function(idx,item){
        var $table = $('.table'),
            $header = $table.find('thead'),
            $body = $table.find('.table-content table'),
            $bodyColumns = $body.find('tr:first td'),
            $footer = $table.find('tfoot');
        
        $header.find('tr td').each(function(colIdx,col){
            var $hCol = $(col),
                $bCol = $($bodyColumns[colIdx]),
                isScroll = $hCol.hasClass('scroll');
            
            if(!isScroll){
                $bCol.css('width', $hCol.css('width'));
            }
        });
    });
};

adjustColSize();
$(window).on('resize', function(){
    adjustColSize();    
});