Để làm cho <tbody>phần tử có thể cuộn được, chúng ta cần thay đổi cách hiển thị trên trang tức là sử dụng display: block;để hiển thị phần tử đó dưới dạng phần tử cấp khối.
Vì chúng ta thay đổi thuộc displaytính của tbody, chúng ta cũng nên thay đổi thuộc tính đó cho theadphần tử để tránh phá vỡ bố cục bảng.
Vì vậy chúng tôi có:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Các trình duyệt web hiển thị theadvà tbodycác thành phần dưới dạng nhóm hàng ( table-header-groupvà table-row-group) theo mặc định.
Khi chúng ta thay đổi điều đó, các trphần tử bên trong sẽ không lấp đầy toàn bộ không gian trong thùng chứa của chúng.
Để khắc phục điều đó, chúng tôi phải tính toán độ rộng của tbodycác cột và áp dụng giá trị tương ứng cho các theadcột thông qua JavaScript.
Cột chiều rộng tự động
Đây là phiên bản jQuery của logic trên:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
Và đây là đầu ra (trên Windows 7 Chrome 32) :
DEMO LÀM VIỆC .
Bảng chiều rộng đầy đủ, cột chiều rộng tương đối
Khi Poster gốc cần thiết, chúng tôi có thể mở rộng tabletới 100% lượng widthcontainer của nó và sau đó sử dụng một phần tương đối ( Tỷ lệ phần trăm ) widthcho mỗi cột của bảng.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Vì bảng có bố trí (sắp xếp) chất lỏng , chúng ta nên điều chỉnh độ rộng của theadcột khi thùng chứa thay đổi kích thước.
Do đó, chúng ta nên đặt độ rộng của các cột sau khi cửa sổ được thay đổi kích thước:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
Đầu ra sẽ là:
DEMO LÀM VIỆC .
Hỗ trợ trình duyệt và các lựa chọn thay thế
Tôi đã thử nghiệm hai phương pháp trên trên Windows 7 thông qua các phiên bản mới của Trình duyệt web chính (bao gồm IE10 +) và nó đã hoạt động.
Tuy nhiên, nó không hoạt động đúng trên IE9 trở xuống.
Đó là bởi vì trong cách bố trí bảng , tất cả các phần tử phải tuân theo các thuộc tính cấu trúc giống nhau.
Bằng cách sử dụng display: block;cho các phần tử <thead>và <tbody>, chúng tôi đã phá vỡ cấu trúc bảng.
Thiết kế lại bố cục thông qua JavaScript
Một cách tiếp cận là thiết kế lại bố cục (toàn bộ) bảng. Sử dụng JavaScript để tạo bố cục mới một cách nhanh chóng và xử lý và / hoặc điều chỉnh độ rộng / chiều cao của các ô một cách linh hoạt.
Ví dụ, hãy xem các ví dụ sau:
Bàn làm tổ
Cách tiếp cận này sử dụng hai bảng lồng nhau với div chứa. Cái đầu tiên tablechỉ có một ô có một divvà bảng thứ hai được đặt bên trong divphần tử đó .
Kiểm tra các bảng cuộn dọc tại CSS Play .
Điều này hoạt động trên hầu hết các trình duyệt web. Chúng tôi cũng có thể thực hiện logic trên một cách linh hoạt thông qua JavaScript.
Bảng có tiêu đề cố định khi cuộn
Vì mục đích của việc thêm thanh cuộn dọc bên <tbody>đang hiển thị bảng tiêu đề ở đầu mỗi hàng, chúng ta có thể xác định vị trí các theadyếu tố để nghỉ fixedở phía trên cùng của màn hình để thay thế.
Dưới đây là một bản demo làm việc của phương pháp này được thực hiện bởi Julien .
Nó có một hỗ trợ trình duyệt web đầy hứa hẹn.
Và đây là một triển khai CSS thuần túy của Willem Van Bockstal .
Giải pháp CSS thuần túy
Đây là câu trả lời cũ. Tất nhiên tôi đã thêm một phương thức mới và tinh chỉnh các khai báo CSS.
Bảng có chiều rộng cố định
Trong trường hợp này, tablecần phải có một cố định width (bao gồm tổng chiều rộng của cột và chiều rộng của thanh cuộn dọc) .
Mỗi cột nên có một cụ thể chiều rộng và cột cuối cùng của theadnguyên tố cần có một lớn hơn chiều rộng bằng với những người khác chiều rộng + các chiều rộng của cuộn thanh dọc.
Do đó, CSS sẽ là:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
Đây là đầu ra:
DEMO LÀM VIỆC .
Bảng có chiều rộng 100%
Trong phương pháp này, tablecó chiều rộng 100%và cho mỗi thvà td, giá trị của widthtài sản nên nhỏ hơn 100% / number of cols.
Ngoài ra, chúng ta cần phải giảm chiều rộng của theadnhư giá trị của chiều rộng của cuộn thanh dọc.
Để làm điều đó, chúng ta cần sử dụng calc()chức năng CSS3 , như sau:
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
Đây là bản Demo trực tuyến .
Lưu ý: Cách tiếp cận này sẽ thất bại nếu nội dung của mỗi cột phá vỡ dòng, tức là nội dung của mỗi ô phải đủ ngắn .
Sau đây, có hai ví dụ đơn giản về giải pháp CSS thuần mà tôi đã tạo tại thời điểm tôi trả lời câu hỏi này.
Đây là bản thử nghiệm jsFiddle v2 .
Phiên bản cũ: jsFiddle Demo v1
