tbody 滚动条设置

栏目: Html · 发布时间: 6年前

内容简介:文章介绍了如何将滚动条设置在

文章介绍了如何将滚动条设置在 tbody 标签上,并且表格整体和未设置滚动条一致;此外补充了一些 table 的冷门姿势。

How to set tbody height with overflow scroll

问题demo

解决问题demo

要想给tbody一个超出的滚动条,其实只需要给tbody设置一个固定 height ,以及 overflow:auto 也就是超出添加滚动条。但是table固有的 display 属性使得为thead和tbody设置 height 没有用。

这里首先做的就是改变 display 属性:

table,thead,tbody{
    display:block
}
复制代码

之后可以设置 height ,但是在设置 height 后,这时候表格的样式扭曲了,表现为问题demo表二,为了保持样式正常,需要:

thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
复制代码

display:table 使得 tr 标签表现为一个 table , table-layout:fixed 和设置宽度的 width:100% 是一套组合拳,使得这个"table"的第一行宽度为 100% ,并且每一列宽度是一致的,后面所有行按照第一行对齐,如果内容超出就出现滚动条。

如果想使得 theadtbody 宽度保持一致,需要额外去除 thead 多余的滚动条的宽度,比如:

thead {
    width: calc( 100% - 1em )
}
复制代码

这之后每一列的列宽是一致的。存在的问题是如果提前使用标签 colgroup 设置不同列宽,这里是丢失的。

不是很好的解决方法是重新再去为 thtd 设置宽度,比如:

th:nth-child(1),
td:nth-child(1) {
  width: 5%;
}
th:nth-child(2),
td:nth-child(2) {
  width: 6.7%;
}
复制代码

顺便补充一下关于 table 的冷门姿势

什么时候去用 table 呢?

歪果话是这么说的:tables are for tabular data. 啥意思呢?比如乘法口诀表...

不要用 table 去布局!因为html标签是语义化的,多余语义化的标签对screen readers不友好。

theadtbodytfoot

只有一个表头推荐使用这个三个元素去包裹行( tr 元素),语义化指定。

这里 tfoot 元素是特殊的,推荐在html中 tfoot 是放在 thead 之后, tbody 之前。(但是渲染结果还是在最后的)理由:

this is an accessibility concern, as the footer may contain information necessary to understand the table, it should be before the data in the source order.

demo

tdth

cells

其中 th 不限制只在 thead 中使用,它只是简单表示标题信息

双轴情况就跳过不使用 thead 了, 双轴

cells合并

rowspan 是多行合并, colspan 是多列合并

比较常见的是组织table headers:demo

基本样式

使用colors、lines去区分表格的各个部分。

默认情况下,table cells之间间隔2px(通过用户代理样式表):

table {
    border-collapse: separate;
    border-spacing: 2px;
}
复制代码

可以去设置这个值的大小:

table {
  border-spacing: 0.5rem;
}
复制代码

更常见的是移除这个值:

table {
  border-collapse: collapse;
}
复制代码

demo


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML5与CSS3基础教程(第8版)

HTML5与CSS3基础教程(第8版)

[美] Elizabeth Castro、[美] Bruce Hyslop / 望以文 / 人民邮电出版社 / 2014-5 / 69.00元

本书是风靡全球的HTML和CSS入门教程的最新版,至第6版累积销量已超过100万册,被翻译为十多种语言,长期雄踞亚马逊书店计算机图书排行榜榜首。 第8版秉承作者直观透彻、循序渐进、基础知识与案例实践紧密结合的讲授特色,采用独特的双栏图文并排方式,手把手指导读者从零开始轻松入门。相较第7版,全书2/3以上的内容进行了更新,全面反映了HTML5和CSS3的最新特色,细致阐述了响应式Web设计与移......一起来看看 《HTML5与CSS3基础教程(第8版)》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试