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

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

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

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

热门问答

腾讯云 COS 怎么才能外链调用 m3u8 到别的网站播放?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
设置公有读私有写:当访问对象时,COS 读取到对象的权限为公有读,此时无论存储桶为何种权限,对象都可以被直接下载 设置步骤 登录 对象存储控制台,选择左侧菜单栏【存储桶列表】,进入存储桶列表页面。单击需要修改对象权限的对应存储桶,进入存储桶。 📷 找到需要设置权限的对象(如 e...... 展开详请

Ubuntu搭建的WordPress如何修改php.ini?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
php新手很多不知道怎么查配置文件在哪,这里提供一个很简单的方法 使用 php -i 命令可以打印php的详细信息,可以把这堆东西输出一下 php -i > outputphp.txt,结合 grep 查找命令 php -i| grep php.ini 打印结果如下 Config...... 展开详请

归档存储采用的存储介质是什么, 安全可靠吗?

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
归档存储主要是针对海量、重要且访问频率极低的非结构化数据进行长期的归档保存和备份管理。 在数据安全层面,归档存储提供数据锁定机制,防止数据被修改和删除,保障数据安全。 技术架构: image.png 与对象存储的差异 归档存储 CAS 是一项离线存储服务,不同于在线的对象存储 ...... 展开详请

在按官网手册排错后依然提示1004错误?

看你的代码好像是短信相关的代码,1004错误代表请求包解析失败,通常情况下是由于没有遵守 API 接口说明规范导致的。 建议您通过以下方式定位解决: 首先,要确认发送的请求是否是标准的 json 格式; 第二,检查是否有将单引号当做双引号使用(json 标准应该是双引号); 第...... 展开详请

redis数据库应该怎样连接???

滑稽园扛把子

Swoole · PHP开发工程师 (已认证)

As a PHP Developer
推荐
实例初始化完成后,连接腾讯云Redis时,需要输入设置的密码。主从版和集群版的连接示例如下 主从版连接示例 主从版支持2种格式 • 格式1,“实例id:密码”的格式类型,例如您的实例id是crs-bkuza6i3,设置的密码是abcd1234,则连接命令如下 redis-cli ...... 展开详请

如何使用holer实现从外网访问本地WEB应用?

Dingda

Dingda · 站长 (已认证)

多一些不为什么的坚持
推荐
解压holer软件 获取holer access key信息: 在holer官网上申请专属的holer access key或者使用开源社区上公开的access key信息。 启动holer服务: Windows系统平台: 打开CMD窗口进入可执行程序所在的目录下,执行命令:...... 展开详请

所属标签

扫码关注云+社区