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

Z时代
2024-01-10
分类：问答

如何设置<table>100％的宽度并仅在<tbody>垂直滚动条中放置一些高度？

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 200px;
    display: inline-block;
    width: 100%;
overflow: auto;
}

<table>
  <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>
  </tbody>
</table>

我希望避免增加一些额外的div，我要的是简单的表像这样，当我试图改变显示table-layout，position和CSS表更事情不是100％的宽度仅与PX固定宽度的工作好。

回答：

为了使<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;为<thead>和<tbody>元素，我们把这个表结构。

一种方法是重新设计（整个）表布局。使用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 */
}

这是输出：

固定宽度桌

在这种方法中，每个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;
}