100% 宽度的 HTML 表格，在 tbody 内垂直滚动

Question

这个问题在这里已经有了答案:





Table fixed header and scrollable body

(27 个回答)


去年关闭。




我如何设置 <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 中具有固定宽度。

Answer 1

为了使<tbody>元素可滚动，我们需要改变它在页面上的显示方式，即使用 display: block;将其显示为块级元素。

由于我们更改了 display tbody 的属性(property)，我们应该为 thead 更改该属性元素以及防止破坏表格布局。

所以我们有:

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 上):



WORKING DEMO .

全宽表，相对宽度列

由于原始海报需要，我们可以扩展 table到 width 的 100%其容器，然后使用相对(百分比) 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

输出将是:



WORKING DEMO .

浏览器支持和替代品

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

然而，它 doesn't work properly on IE9和下面。

那是因为 在 table layout ，所有元素都应遵循相同的结构特性。

通过使用 display: block;为 <thead>和 <tbody>元素，我们打破了表格结构。

通过 JavaScript 重新设计布局

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

例如，请看以下示例:

jQuery .floatThead() 插件( float /锁定/粘性表头插件)

jQuery Scrollable Table 插入。 ( source code 在 github 上)

jQuery .FixedHeaderTable() 插件(source code 在 github 上)

数据表 vertical scrolling 例子。

嵌套表

这种方法使用两个带有包含 div 的嵌套表。第一 table只有一个单元格具有 div ，第二个表放在 div 里面元素。

检查 Vertical scrolling tables在 CSS 播放。

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

滚动时带有固定标题的表格

由于添加垂直滚动条的目的 <tbody>正在显示表格 标题在每一行的顶部，我们可以 职位 thead元素留 fixed而是在屏幕顶部。

这是一个 Working Demo 这种方法由 执行Julien .
它有一个很有前途的网络浏览器支持。

和 here pure CSS 实现者 Willem Van Bockstal .

纯 CSS 解决方案

这是旧答案。当然，我已经添加了一个新方法并改进了 CSS 声明。

固定宽度的 table

在这种情况下， 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 */
}

这是输出:



WORKING DEMO .

100% 宽度的 table

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

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

为此，我们需要使用 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;
}

这是 Online Demo .

注:这种方法将 失败 如果每列的内容断行，即 每个单元格的内容应该足够短 .

下面是我在回答这个问题时创建的纯 CSS 解决方案的两个简单示例。

这是 jsFiddle Demo v2 .

旧版本: jsFiddle Demo v1