Ok, tôi đã đọc rất nhiều câu trả lời trên web và cuối cùng đã lắp ráp một bản trình diễn hoạt động. Tôi đang sử dụng PHP để tạo ra 50 hàng trong bảng, nhưng bạn có thể dễ dàng mã hóa dữ liệu một cách dễ dàng. Về cơ bản, tôi đã tạo ra bốn góc phần tư (div.q1, div.q2, div.q3 và div.q4), trong đó góc phần tư thứ tư chứa bảng dữ liệu thực tế. Tôi sử dụng jquery để sao chép bảng trong góc phần tư thứ tư vào góc phần tư thứ hai và thứ ba trước khi đồng bộ hóa thanh cuộn của họ. Tôi đã sử dụng kết hợp các thuộc tính tràn, chiều rộng, chiều cao và hiển thị CSS để ẩn các phần tử TD không cần thiết trong mỗi góc phần tư. Dưới đây là ví dụ hoạt động đầy đủ:
<html>
<head>
<style>
body {width:350px;}
.q1, .q2, .q3, .q4 {overflow:hidden; display:block; float:left;}
.q1 {width:50px; height: 30px;}
.q2 {width:300px; height: 30px;}
.q3 {width:50px; height: 100px;}
.q4 {width:300px; height: 100px; overflow:auto;}
.q2 .firstCol, .q3 thead, .q4 thead, .q4 .firstCol {display:none;}
.q2 td {background-color:#999;}
.q3 td {background-color:#999;}
.container {width:9999px;}
</style>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
$('.q4').bind('scroll', fnscroll);
$('.q2').html($('.q4').html());
$('.q3').html($('.q4').html());
});
function fnscroll(){
$('.q2').scrollLeft($('.q4').scrollLeft());
$('.q3').scrollTop($('.q4').scrollTop());
}
</script>
</head>
<body>
<div class="q1"><div class="container"></div></div>
<div class="q2"><div class="container"></div></div>
<div class="q3"><div class="container"></div></div>
<div class="q4">
<div class="container">
<table>
<thead>
<tr>
<td class="firstCol"></td>
<td>Col</td>
<td>Col</td>
<td>Col</td>
<td>Col</td>
<td>Col</td>
<td>Col</td>
<td>Col</td>
<td>Col</td>
</tr>
</thead>
<tbody>
<?php for($c=0; $c<50; $c++) { ?>
<tr>
<td class="firstCol">Row</td>
<td>this is some content</td>
<td>hello world!<br/>This is good</td>
<td>Row</td>
<td>adjfljaf oj eoaifj </td>
<td>ajsdlfja oije</td>
<td>alsdfjaoj f</td>
<td>jadfioj</td>
<td>jalsdjf oai</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</body>
</html>
này là rất tốt. chỉ cần thêm một fiddle cho điều này ở đây http://jsfiddle.net/9NcnH/ – dotnetcoder
làm thế nào chúng ta có thể điều chỉnh chiều rộng cho q3 động dựa trên nội dung như trái ngược với thiết lập này đến 50px? – dotnetcoder