如何设置100%宽度的HTML表格,并在tbody内部有垂直滚动条?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (9)
  • 关注 (0)
  • 查看 (1463)

我怎样才能设置100%宽度的HTML表格,并在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-layoutposition和在css表中的有很多的东西不能正常工作,只有在PX中带固定的宽度才能生效。

提问于
用户回答回答于

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

由于我们改变了tbodydisplay属性,我们也应该改变这个属性,以防止破坏表格布局。

所以我们执行了以下代码:

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浏览器将theadtbody元素默认显示为row-group(table-header-grouptable-row-group)。

一旦我们改变了这一点,内部的tr元素不会填充它们容器的整个空间

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

自动宽度列

以下是上述逻辑的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%,然后使用表中每列的相对(百分比)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>元素,我们打破了table的结构。

通过JavaScript重新设计布局

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

例如,请看以下示例:

嵌套表

这种方法使用两个嵌套表,其中包含一个div。第一table只有一个单元格具有div,第二个table放在div内。

在CSS Play上检查垂直滚动表..

这在大多数浏览器上都是有效的。我们还可以通过JavaScript动态地完成上述逻辑。

卷轴上有固定标头的表

由于将垂直滚动条添加到<tbody>的目的是在每行顶部显示表格标题,所以我们可以将thead元素的位置保持fixed在屏幕的顶部。

演示,来自Julien.

点击这里有关pure CSS如何实现,来自威廉·范博克斯塔尔...

Pure 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

在这种方法中,table的宽度为100%,对于每个thtdwidth属性的值应小于100% / number of cols

另外,我们需要减少作为宽度垂直滚动条thead的宽度成。

为了做到这一点,我们需要使用CSS 3.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;
}

演示

注:如果每一列的内容打破了这条线,这种方法就会失败,即每个单元的内容应该足够短。

以下为两个pure css解决方案的演示:

jsFiddle演示V2...

旧版本:jsFiddle演示V1

热门问答

腾讯云广州一区DNS变更,需要怎么操作?

思潮澎湃轻描淡写的生活,但思潮澎湃
推荐
我也收到相关的通知了,这里分享下~ 2019年1月31日,腾讯云将对广州地区旧的基础网络DNS服务器(10.225.30.181、10.225.30.223)进行下线。在此期间,腾讯云提供最新的DNS服务器供您更新使用。 我们建议您尽快将DNS服务器配置进行更新,并且我们为您提供...... 展开详请

快照容量与费用的比例?如何关闭停用?

帅的惊动我国计算机大神
推荐已采纳
快照已于2019年1月22日0时启动正式商业化进程,商业化后所有存量快照和新产生的快照将根据快照使用的存储容量进行收费。 在快照商业化后,腾讯云仍旧会在国内主要地域为用户提供一定量的免费额度。免费额度策略如下: 免费额度覆盖范围为中国大陆地域,中国香港及海外地域暂无免费快照额...... 展开详请

云服务器购买后多久生效能使用?

Eli Qiao

腾讯 · 高级工程师 (已认证)

腾讯云CVM后台高级研发工程师
推荐

如果使用公有镜像,一般 10s 左右后台就可以创建完成。

欠费资源销毁怎么解决?

西风

renzha.net · 站长 (已认证)

www.renzha.net
推荐
当您的账户发生欠费时,对象存储 COS 会在24小时后停止服务,您的数据可以继续保留120天,如果在此期间未进行续费使账户余额大于等于0, 您的数据将会被销毁。 注意: 欠费停服后,数据占用的存储容量会持续计费,直到销毁数据。 销毁数据后,不可恢复。 用户续费使账户余额大于等于...... 展开详请

React项目的try_files机制,在COS上怎么配置?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐
COS的静态网站可以设置默认索引,你这里应该是想实现react-router spa场景下刷新浏览器时,不希望报404的场景吧 可以在COS静态网站这设置一个错误文档的默认索引来实现类似try_files的功能 image.png ... 展开详请

用户主动向云服务器的号码发送短信(不是回复),该条消息能否回调给业务服务器?

推荐

您好,主动上行需配置专属上行码号,月发送量大于300万条可申请配置。未配置专属上行码号用户可先下发短信后用户回复。感谢您对腾讯云短信的支持。

所属标签

扫码关注云+社区