In order to make <tbody>
element scrollable, we need to change the way it's displayed on the page ie using display: block;
(为了使<tbody>
元素可滚动,我们需要改变它在页面上显示的方式,即使用display: block;
)
to display that as a block level element. (将其显示为块级元素。)
Since we change the display
property of tbody
, we should change that property for thead
element as well to prevent from breaking the table layout.
(由于我们更改了tbody
的display
属性,因此我们应该更改thead
元素的属性,以防止破坏表格布局。)
So we have:
(所以我们有:)
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Web browsers display the thead
and tbody
elements as row-group ( table-header-group
and table-row-group
) by default.
(Web浏览器tbody
将thead
和tbody
元素显示为行组 ( table-header-group
和table-row-group
)。)
Once we change that, the inside tr
elements doesn't fill the entire space of their container.
(一旦我们改变它,内部tr
元素不会填充其容器的整个空间。)
In order to fix that, we have to calculate the width of tbody
columns and apply the corresponding value to the thead
columns via JavaScript.
(为了解决这个问题,我们必须计算tbody
列的宽度,并通过JavaScript将相应的值应用于thead
列。)
Auto Width Columns (自动宽度列)
Here is the jQuery version of above logic:
(这是上面逻辑的jQuery版本:)
// 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]);
});
And here is the output (on Windows 7 Chrome 32) :
(这是输出(在Windows 7 Chrome 32上) :)
WORKING DEMO .
(工作演示 。)
Full Width Table, Relative Width Columns (全宽表,相对宽度列)
As the Original Poster needed, we could expand the table
to 100% of width
of its container, and then using a relative ( Percentage ) width
for each columns of the table.
(正如原始海报所需,我们可以将table
扩展到其容器width
的100%,然后使用表的每列的相对( 百分比 ) width
。)
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Since the table has a (sort of) fluid layout , we should adjust the width of thead
columns when the container resizes.
(由于表格具有(某种) 流体布局 ,因此我们应该在容器调整大小时调整thead
列的宽度。)
Hence we should set the columns' widths once the window is resized:
(因此,一旦调整窗口大小,我们应该设置列的宽度:)
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
The output would be:
(输出将是:)
WORKING DEMO .
(工作演示 。)
Browser Support and Alternatives (浏览器支持和替代方案)
I've tested the two above methods on Windows 7 via the new versions of major Web Browsers (including IE10+) and it worked.
(我已经通过新版本的主要Web浏览器(包括IE10 +)在Windows 7上测试了上述两种方法,并且它有效。)
However, it doesn't work properly on IE9 and below.
(但是,它不 工作 正常 上IE9及以下。)
That's because in a table layout , all elements should follow the same structural properties.
(那是因为在表格布局中 ,所有元素都应遵循相同的结构属性。)
By using display: block;
(通过使用display: block;
)
for the <thead>
and <tbody>
elements, we've broken the table structure. (对于<thead>
和<tbody>
元素,我们打破了表结构。)
Redesign layout via JavaScript (通过JavaScript重新设计布局)
One approach is to redesign the (entire) table layout.
(一种方法是重新设计(整个)表格布局。)
Using JavaScript to create a new layout on the fly and handle and/or adjust the widths/heights of the cells dynamically. (使用JavaScript动态创建新布局并动态处理和/或调整单元格的宽度/高度。)
For instance, take a look at the following examples:
(例如,看看以下示例:)
Nesting tables (嵌套表)
This approach uses two nested tables with a containing div.
(此方法使用两个嵌套表,其中包含div。)
The first table
has only one cell which has a div
, and the second table is placed inside that div
element. (第一个table
只有一个有div
单元格,第二个表放在div
元素内。)
Check the Vertical scrolling tables at CSS Play .
(检查CSS Play上的垂直滚动表 。)
This works on most of web browsers.
(这适用于大多数Web浏览器。)
We can also do the above logic dynamically via JavaScript. (我们也可以通过JavaScript动态地完成上述逻辑。)
Table with fixed header on scroll (滚动固定标题表)
Since the purpose of adding vertical scroll bar to the <tbody>
is displaying the table header at the top of