JSFiddle - React, Tailwind, and code Playground

by Ta No Bi

HTML

<link rel="stylesheet" href="http://bbc.somee.com/bootstrap.min.css">
<link rel="stylesheet" href="http://bbc.somee.com/5g.css">
<script src="http://bbc.somee.com/jquery-1.11.2.min.js"></script>
<script src="http://bbc.somee.com/jquery-1.11.2.min.js"></script>
<div id="dvTable" class="table-container">
                <div class="table-container-header">
                    <table id="tbHeader" class="table table-bordered">
                        <thead>
                            <tr>
                                <th rowspan="2" class=" hbrb">CK</th>
                                <th rowspan="2" class=" hg_b">TC</th>
                                <th rowspan="2" class=" hg_b">Trần</th>
                                <th rowspan="2" class=" hgrb">Sàn</th>
                                <th colspan="7" class="hbrb">Dư mua</th>
                                <th colspan="3" class="hgrb">Khớp lệnh</th>
                                <th colspan="7" class="hbrb">Dư bán</th>
                                <th rowspan="2" class=" hg_b">Tổng<br>KL</th>
                                <th rowspan="2" class=" hg_b">Mở<br>cửa</th>
                                <th rowspan="2" class=" hg_b">Cao<br>nhất</th>
                                <th rowspan="2" class=" hg_b">Thấp<br>hất</th>
                                <th rowspan="2" class=" hgrb">Trung<br>bình</th>
                                <th rowspan="2" class=" hg_b">NN<br>mua</th>
                                <th rowspan="2" class=" hg_b">NN<br>bán</th>
                                <th rowspan="2" class=" hg_b">Room<br>còn lại</th>

                            </tr>
                            <tr>
                                <th class=" hb_b">KL4</th>
                                <th class=" hb_b">G3</th>
                                <th class=" hb_b">KL3</th>
                                <th class=" hb_b">G2</th>
                                <th class=" hb_b">KL2</th>
       ...

CSS

p.fixed-table-scroll-inner {
    width: 100%;
    height: 200px;
}

div.fixed-table-scroll-outer {
    top: 0;
    left: 0;
    visibility: hidden;
    width: 100%;
    height: 150px;
    overflow: hidden;
}

.table-container {
    border: 1px solid #ddd;
    /* border-radius: 5px;  */
    margin: 10px; 
    overflow: hidden;
}

.table-container-header {
	overflow: hidden;
    width: 100%;    
}

.table-container-body {
    height: 100%;
    overflow: auto;
    width: 100%; 
}

.table-container-footer {
   overflow: hidden;
    width: 100%; 
}

.table-container table {
    margin-bottom: 0px;
    /* table-layout: fixed; */
}

.table-container table td,
.table-container table th {
   /*  overflow: hidden; */
    white-space: nowrap;
	/* width:100%; */
    /* text-overflow: ellipsis; */
}

.table-bordered {
      border: 0px;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 0px;
}
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border-top-width: 0px;
}
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
  border-bottom-width: 0px;
}
/*Left*/
.table-bordered > thead > tr > th:first-child,
.table-bordered > tbody > tr > th:first-child,
.table-bordered > tfoot > tr > th:first-child,
.table-bordered > thead > tr > td:first-child,
.table-bordered > tbody > tr > td:first-child,
.table-bordered > tfoot > tr > td:first-child {
  border-left-width: 0px;
}
/*Right*/
.table-bordered > thead > tr > th:last-child,
.table-bordered > tbody > tr > th:last-child,
.table-bordered > tfoot > tr > th:last-child,
.table-bordered > thead > tr > td:last-child,
.table-bordered > tbody > tr > td:last-child,
.table-bordered > tfoot > tr > td:last-child {
  border-right-width: 0px;
}
/*Top*/
.table-bordered > thead > tr:first-child > th,
.table-bordered > thead > tr:first-child > td {
  border-top-width: 0px;
}
/*Bottom*/
.table-bordered > tfoot > tr:last-child > th,
.table-bordered > tfoot >...

JavaScript

var $body = $(".table-container-body"),
    $header = $(".table-container-header"),
    $footer = $(".table-container-footer"),
	$headerlast = [], trtf, trts;
	

// Get ScrollBar width(From: http://bootstrap-table.wenzhixin.net.cn/)
var scrollBarWidth = (function () {
        var inner = $('<p/>').addClass('fixed-table-scroll-inner'),
            outer = $('<div/>').addClass('fixed-table-scroll-outer'),
            w1, w2;
        outer.append(inner);
        $('body').append(outer);
        w1 = inner[0].offsetWidth;
        outer.css('overflow', 'scroll');
        w2 = inner[0].offsetWidth;
        if (w1 === w2) {
            w2 = outer[0].clientWidth;
        }
        outer.remove();
        return w1 - w2;
})();

// Scroll horizontal
$body.on('scroll', function () {
    $header.scrollLeft($(this).scrollLeft());
    $footer.scrollLeft($(this).scrollLeft());
});

// Redraw Header/Footer
var redraw = function() {
	trtf = $header.find('tr:eq(0) th').not('[colspan]');
	trts = $header.find('tr:eq(1) th').not('[colspan]');
	for(var i = 0; i < 4;i++){
		$headerlast.push(trtf[i])
	}
	for(var i = 0; i < trts.length;i++){
		$headerlast.push(trts[i])
	}
	for(var i = 4; i < trtf.length;i++){
		$headerlast.push(trtf[i])
	}
    var tds = $body.find("> table > tbody > tr:first-child > td");
	console.log($headerlast)
    tds.each(function (i) {
		console.log(this, $(this).innerWidth())
        var width = $(this).innerWidth(),
        lastPadding = tds.length +1 == i ? scrollBarWidth : 0; //tam thoi bo 
        //lastPadding = 1;
        lastHeader = $($headerlast[i]).css('width',width + lastPadding);
        lastFooter = $footer.find("th:eq("+i+")").innerWidth(width + lastPadding);
		this.style.width = $($headerlast[i]).css('width');
    });
};

// Selection
$body.find("> table > tbody > tr > td").click(function(e) {
    $body.find("> table > tbody > tr").removeClass("info");
    $(e.target).parent().addClass('info');
});

// Listen to Resize...