html表格滚动字幕的宽度,HTML表格的宽度为100％，在tbody中具有垂直滚动

小编典典

为了使

元素可滚动，我们需要更改其在页面上的显示方式，即用于display: block;将其显示为块级元素。

由于我们更改了的display属性tbody，因此我们也应该更改thead element的属性，以防止破坏表布局。

因此，我们有：

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浏览器将thead和tbody元素显示为行组(table-header-group和table-row-group)。

一旦更改，内部tr元素将无法填充其容器的整个空间。

为了解决这个问题，我们必须计算tbody列的宽度，然后thead通过JavaScript 将相应的值应用于列。

自动宽度列

这是上述逻辑的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]);

});

这是输出(在Windows 7 Chrome 32上)：

全宽表，相对宽度列

根据原始海报的需要，我们可以将其扩大table到width其容器的100％，然后对表的每一列使用相对值(Percentage)width。

table {

width: 100%; /* Optional */

}

tbody td, thead th {

width: 20%; /* Optional */

}

由于表格具有(多种)流体布局，因此在调整thead容器大小时，我们应该调整列的宽度。

因此，一旦调整窗口大小，我们应该设置列的宽度：

// Adjust the width of thead cells when *window* resizes

$(window).resize(function() {

/* Same as before */

}).resize(); // Trigger the resize handler once the script runs

输出为：

机身内部带有垂直滚动的流体工作台

浏览器支持和替代

我已经通过新版本的主要Web浏览器(包括IE10 +)在Windows 7上测试了上述两种方法，并且该方法有效。

但是，它不 工作 正常 上IE9及以下。

这是因为在表格布局中，所有元素都应遵循相同的结构属性。

通过使用display: block;为和

元素，我们把这个表结构。

通过JavaScript重新设计布局

一种方法是重新设计(整个)表布局。使用JavaScript动态创建新的布局并处理和/或动态调整单元格的宽度/高度。

例如，看下面的例子：

jQuery .floatThead()插件(一个浮动/锁定/粘贴表头插件)

jQuery Scrollable Table插件。(github上的源代码)

jQuery .FixedHeaderTable()插件(github上的源代码)

嵌套表

这种方法使用两个包含一个div的嵌套表。第一个表table只有一个具有的单元格，div第二个表位于该div元素内。

在CSS Play上检查Vertical滚动表。

这适用于大多数Web浏览器。我们还可以通过JavaScript动态地执行上述逻辑。

具有固定标题的表格滚动

由于向中添加垂直滚动条的目的是将表格标题显示在每一行的顶部，因此我们可以将元素定位thead为停留fixed在屏幕顶部。

这是Julien进行的这种方法的工作演示。 它具有有前途的Web浏览器支持。

而且在这里一个纯CSS通过实施威廉·Bockstal。

纯CSS解决方案

这是旧答案。当然，我添加了一个新方法并完善了CSS声明。

固定宽度桌

在这种情况下，table应当具有固定的值width (包括列的宽度和垂直滚动条的宽度之和)。

每列应具有特定的宽度，元素的最后一列应具有thead更大的宽度，该宽度等于其他列的宽度 + 垂直滚动条的宽度。

因此，CSS将为：

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 */

}

这是输出：

固定宽度桌

宽度为100％的桌子

在这种方法中，每个table的宽度100%为th和td，width属性的值应小于100% / number of cols。

另外，我们需要减小垂直滚动条宽度的theadas值的宽度。

为此，我们需要使用CSS3 calc()函数，如下所示：

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;

}

注意：如果每列的内容都使行中断，则该方法将失败，即，每个单元格的内容应足够短。

2020-05-13