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

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

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

我怎样才能设置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中带固定的宽度才能生效。

提问于
用户回答回答于

css解决办法,在tbody上正常显示“block”

仍然需要通过jQuery来计算和设置th宽度

table.scroll tbody,
table.scroll thead { display: block; }

table.scroll tbody {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
}

table.scroll tr {
    display: flex;
}

table.scroll tr > td {
    flex-grow: 1;
    flex-basis: 0;
}

jQuery/Javascript

var $table = $('#the_table_element'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

$table.addClass('scroll');

// Adjust the width of thead cells when window resizes
$(window).resize(function () {

    // 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]);
    });

}).resize(); // Trigger resize handler

热门问答

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

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

红包消息如何构建?

红包消息的话,与@消息类似,可以通过 TIMCustomElem 来实现。需要应用在UI上做相应的特殊处理,比如检查到当前消息为红包消息后,消息展示为红包的样式。 另外,红包消息作为重要消息,最好在发送消息的时候将其设置为高优先级消息,以最大程序保证消息在触达频率限制的情况下仍可...... 展开详请

AVChatRoom和ChatRoom有什么区别?

面向的应用场景不同 ChatRoom适用于群组规模中等(不超过数千人级别)、成员进出不太频繁(每秒十几个人进出)的场景;AVChatRoom是专门为了大型直播设计的,适用于人数众多(万级以上)、成员进出频繁(每秒数百人以上进出)的场景。 AVChatRoom的优点 支持人数无上限...... 展开详请

serverless函数如何支持跨域?

解决跨域的方式有几种: 1. 如果不像自行解决跨域问题,且没有处理 http header 方法的问题,可以在 API 网关中,针对 API 配置,不选择 ANY 方法,而且仅选择非 header 的方法,然后勾选启用 CORS,由 API 网关协助解决跨域。完成配置后记得保存并...... 展开详请

调用短信接口返回错误?

您好,短信错误码文档:https://cloud.tencent.com/document/product/382/3771。 报错1021说明:请求发起时间不正常,通常是由于您的服务器时间与腾讯云服务器时间差异超过 10 分钟导致的 核查步骤: 1.请核查服务器时间是否正常; ...... 展开详请

对象存储数据三副本问题,谢谢 ?

波斯狗儿对象存储产品经理
推荐已采纳

1 COS 不完全使用副本的方式保存,数据调度能力属于我们的产品核心竞争力,具体实现方式一般不披露。

2 副本对用户是不感知的,COS 是一个最终一致性的存储,如果发起删除导致数据丢失,所有的数据都会被删除。

所属标签

扫码关注云+社区