Khi scroll dữ liệu trong 1 bảng, nếu dữ liệu quá dài, bạn cần phải scroll dữ liệu. Lúc đó phần header sẽ bị ẩn mất. Vì vậy cần đóng băng Header để cố định nó trong bảng. Điều này sẽ giúp bạn xác định được thông tin ở cột nào khi bạn scroll dữ liệu.
Bài viết này sẽ mình chia sẻ với các bạn source code đóng băng phần Header chỉ sử dụng CSS thay cho phải sử dụng 1 thư viện JS cồng kềnh được chia sẻ trên mạng.
Đóng băng phần Header của Table
File: index.html
<html lang="vi">
<head>
<title>Freeze Header of the table - vinasupport.com</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>Đóng băng Header của Table với HTML/CSS - VinaSupport.com</h1>
<div class="tableContainer">
<table class="scrollTable" style="width: 100%">
<colgroup>
<col style="width: 20%;">
<col style="width: 30%;">
<col style="width: 50%;">
</colgroup>
<thead class="fixedHeader">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
File: style.css
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px;
overflow: auto;
width: 900px;
}
/* Reset overflow value to hidden for all non-IE browsers. */
html > body div.tableContainer {
overflow: hidden;
width: 900px;
}
/* define width of table. IE browsers only */
div.tableContainer table {
float: left;
border-spacing: 0;
}
div.tableContainer table tr {
display: table;
width: 100%;
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative;
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* make the TH elements pretty */
thead.fixedHeader th {
background: #ccc;
border: 1px solid #ccc;
font-weight: normal;
padding: 4px 3px;
text-align: left;
}
html > body thead.fixedHeader {
display: table;
overflow: auto;
width: 100%;
}
html > body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%;
}
/* make TD elements pretty. Provide alternating classes for striping the table */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #fff;
border-bottom: none;
border-left: none;
border-right: 1px solid #ccc;
border-top: 1px solid #ddd;
padding: 2px 3px 3px 4px;
}
tbody.scrollContent tr.alternateRow td {
background: #eee;
border-bottom: none;
border-left: none;
border-right: 1px solid #ccc;
border-top: 1px solid #ddd;
padding: 2px 3px 3px 4px;
}
Kết quả ta có 1 bảng như sau:
Nguồn: vinasupport.com
