Trong lập trình đôi lúc ta muốn lấy dữ liệu ra và cho nó vào bảng để hiển thị. Vấn đề đặt ra là khi dữ liệu nhiều quá thì trang web của chúng ta sẽ dài thêm, phá đi bố cục ban đầu của ta. Để vẫn giữ được bố cục và load dữ liệu ra bảng người ta thường dùng là phân trang. Nhưng đôi lúc không muốn phân trang, ta sẽ tạo thêm thanh cuộn trong phần thân của bảng.
Để bắt đầu tạo thanh cuộn, trước hết ta sẽ tạo ra trang HTML với nội dung là bảng và các cột như sau:
chúng ta tạo trang HTML với tên index.html với nội dung:
-------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Lorem ipsum dolor sit amet.</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------------------------------------------------------------------------------------
Nội dung của trang html chủ yếu là chứa nội dung của bảng của chúng ta. Thực thi thì có kết quả như sau:
Tiếp theo ta sẽ tạo CSS để thêm thanh cuộn cho bảng ở trên, ta vào trên dòng </head> thêm nội dung như sau:
--------------------------------------------------------------------------------------------------
<style>
table.scroll {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
/* width: 20%; */ /* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
</style>
--------------------------------------------------------------------------------------------------
Ta sẽ thực hiện run để xem kết quả:
Ok vậy là đã xuất hiện thanh cuộn như chúng ta mong muốn, nhưng vẫn còn 1 vấn đề là các cột header và body nó không ngay thành 1 cột. bây giờ chúng ta sẽ thêm 1 chút <script> để nó được như mong muốn. Bây h ta vào trước dòng </body> thêm vào đoạn sau:
--------------------------------------------------------------------------------------------------
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
--------------------------------------------------------------------------------------------------
Nội dung của đoạn này là thêm Jquery vào để chúng ta thực hiện. Tiếp theo ta sẽ xử lý cho các cột nay ngắn lại. tiếp tục ta thêm đoạn code này dưới đoạn code vừa thêm ở trên, nội dung như sau:
--------------------------------------------------------------------------------------------------
<script>
// Chọn vào class của bảng, ví dụ ở đây class là scroll
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// nhận về thông tin khi của sổ thay đổi kích thước
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Thiết đặt giá trị cho cột header
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize();
--------------------------------------------------------------------------------------------------
Ok vậy là ta đã hoàn thành, công việc cuối cùng là hãy run lên để xem kết quả nhé:
Vậy là chúng ta đã hoàn thành được như ý muốn. Các bạn có thể tải soucre về đẻ chạy thử theo link sau: Nhấp vào đây để tải về
Link dự phòng: https://mega.co.nz/#!6wI0RIQZ!3HVpg8ZTFq1ifcB9lrwuAhB-hTDQNCyq3vT0vT5_0e8
lưu ý: cần phải có internet để có thể chạy được file jquery nhé. Chúc các bạn thành công.