如何设置 <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中的固定宽度 .
10 回答
这个代码对我来说可以在一个带有可滚动tbody的表上创建一个粘性thead:
为了使
<tbody>
元素可滚动,我们需要改变它在页面上显示的方式,即使用display: block;
将其显示为块级元素 .由于我们更改了
tbody
的display
属性,因此我们应该更改thead
元素的该属性,以防止破坏表格布局 .所以我们有:
默认情况下,Web浏览器将
thead
和tbody
元素显示为行组(table-header-group
和table-row-group
) .一旦我们更改了它,内部
tr
元素就不会填充其容器的整个空间 .为了解决这个问题,我们必须计算
tbody
列的宽度,并通过JavaScript将相应的值应用于thead
列 .自动宽度列
这是上面逻辑的jQuery版本:
这是输出(在Windows 7 Chrome 32上):
WORKING DEMO .
全宽表,相对宽度列
由于原始海报需要,我们可以将
table
扩展到其容器的width
的100%,然后为表的每列使用相对(百分比)width
.由于表有一个(有点) fluid layout ,我们应该在容器调整大小时调整
thead
列的宽度 .因此,一旦调整窗口大小,我们应该设置列的宽度:
输出将是:
WORKING DEMO .
浏览器支持和替代方案
我已经通过新版本的主要Web浏览器(包括IE10)在Windows 7上测试了上述两种方法,并且它有效 .
但是,doesn't work properly on IE9及以下 .
那是因为 in a table layout, all elements should follow the same structural properties.
通过将
display: block;
用于<thead>
和<tbody>
元素,我们打破了表结构 .通过JavaScript重新设计布局
一种方法是重新设计(整个)表格布局 . 使用JavaScript动态创建新布局并动态处理和/或调整单元格的宽度/高度 .
例如,看看以下示例:
jQuery .floatThead() 插件(浮动/锁定/粘性表头插件)
jQuery Scrollable Table 插件 . (source code在github上)
jQuery .FixedHeaderTable() 插件(source code在github上)
DataTables vertical scrolling 示例 .
嵌套表
此方法使用两个嵌套表,其中包含div . 第一个
table
只有一个单元格有div
,第二个表格放在div
元素内 .检查CSS Play上的Vertical scrolling tables .
这适用于大多数Web浏览器 . 我们也可以通过JavaScript动态地完成上述逻辑 .
滚动时带有固定 Headers 的表格
由于将垂直滚动条添加到
<tbody>
的目的是在每行的顶部显示表 header ,我们可以 positionthead
元素保留fixed
在屏幕顶部 .这是 Julien 执行的这种方法的 Working Demo .
它有一个很有前途的Web浏览器支持 .
here pure CSS 实施Willem Van Bockstal .
纯CSS解决方案
这是旧答案 . 当然我添加了一个新方法并改进了CSS声明 .
具有固定宽度的表
在这种情况下,
table
应该具有固定的width
(包括列的宽度和垂直滚动条的宽度之和) .每列应具有特定宽度,
thead
thead
元素需要更大的宽度,等于其他列的宽度,垂直滚动条的宽度 .因此,CSS将是:
这是输出:
WORKING DEMO .
表宽度为100%
在此方法中,
table
的宽度为100%
,对于每个th
和td
,width
属性的值应小于100% / number of cols
.此外,我们需要将
thead
的宽度减小为垂直滚动条宽度的值 .为此,我们需要使用CSS3 calc()函数,如下所示:
这是 Online Demo .
Note: 如果每列的内容打破了这一行,则该方法将为 fail ,即 the content of each cell should be short enough .
在下面,有两个简单的纯CSS解决方案示例,我在回答这个问题时创建了它 .
这是 jsFiddle Demo v2 .
旧版本: jsFiddle Demo v1
在现代浏览器中,您可以简单地使用css:
在以下解决方案中,表占用父容器的100%,不需要绝对大小 . 它的纯CSS,使用flex布局 .
以下是它的外观:
可能的缺点:
垂直滚动条始终可见,无论是否需要;
表格布局是固定的 - 列不会根据内容宽度调整大小(您仍然可以设置您想要的任何列宽度);
有一个绝对大小 - 滚动条的宽度,对于我能够检查的浏览器大约是0.9em .
HTML(缩写):
CSS,为清晰起见省略了一些装饰:
full code on jsfiddle
LESS中的代码相同,因此您可以将其混合使用:
在制作 tbody & thead 显示块后,为 td,th 添加固定宽度可以很好地工作,我们也可以使用slimscroll插件使滚动条漂亮 .
尝试以下方法, very simple easy to implement
下面是jsfiddle链接
http://jsfiddle.net/v2t2k8ke/2/
HTML:
CSS:
jQuery的:
按照以下说明,我最终使用纯CSS获得了它:
http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/
第一步是将
<tbody>
设置为display:block,以便可以应用溢出和高度 . 从那里,<thead>
中的行需要设置为position:relative和display:block,以便它们位于现在可滚动的<tbody>
之上 .tbody, thead { display: block; overflow-y: auto; }
因为
<thead>
相对定位,所以每个表格单元格都需要显式宽度但不幸的是,这还不够 . 当存在滚动条时,浏览器会为其分配空间,因此,
<tbody>
最终可用空间比<thead>
少 . 请注意这会造成轻微的错位......我能想到的唯一解决方法是在除最后一列之外的所有列上设置最小宽度 .
整个codepen示例如下:
CSS:
HTML:
编辑:表宽100%的替代解决方案(实际上是固定宽度,并没有回答问题):
HTML:
CSS:
演示:http://codepen.io/anon/pen/bNJeLO
Css解决方法强制列使用'block'tbody正确显示
此解决方案仍然需要
th
宽度由jQuery计算和设置和Jquery / Javascript
我正在使用
display:block
表示thead
和tbody
. 因此,thead
列的宽度与tbody
列的宽度不同 .为了解决这个问题,我使用了小的
jQuery
代码,但它只能在JavaScript
中完成 .这是我的工作演示:http://jsfiddle.net/gavroche/N7LEF/
在IE 8中不起作用
依次创建两个表,将第二个表放在固定高度的div中,并将overflow属性设置为auto . 同时将第二个表中的所有td保持为空 .