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

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

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

我怎样才能设置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

热门问答

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

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

看到 API 网关已支持前端类型为 WebSocket,有无相关文档?

Masonlu

腾讯 · 产品经理 (已认证)

推荐已采纳
websocket的demo模板已经上了前台,今天会全网发布,相关文档也在审核当中,我这里先把它贴到附件里,供参考。 Websocket 原理介绍.pdf Websocket 使用方法.pdf 届时,可以通过控制台选择demo直接创建ws的云函数。... 展开详请

一个用户加入多个群组,发现不同群组间消息互窜,怎么解决?

LemonLu

社区 · 运营 (已认证)

Less is more
推荐

在解析的时候需要根据群组ID处理,因为不同的群组消息有不同的群组ID的。

COS Javascript 上传图片putObject成功后没有返回ETag?

许金泉

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

腾讯云COS前端开发
推荐

腾讯云通讯能做类似qq微信的语音通话的效果吗?

推荐

腾讯云通信IM只支持发送语音功能

如果需要实现语音通话功能可以集成实时音视频来实现

详情请参考https://cloud.tencent.com/product/trtc

腾讯云50G系统盘,购买的数据盘在挂载后没有D盘符只有E盘符,如何设置D盘符?

推荐
已购买数据盘的用户,需要格式化数据盘才可使用。 格式化数据盘 1. 登录 Windows 云服务器。 2. 单击【开始】-【服务器管理器】-【工具】-【计算机管理】-【存储】-【磁盘管理】。 3. 在磁盘 1 上右键单击,选择【联机】: 📷 4. 右键单击,选择【初始化磁盘】:...... 展开详请

所属标签

扫码关注云+社区