CSS代码演示

table tbody {display:block;height:200px; //高度根据实际自定义overflow-y:scroll;-webkit-overflow-scrolling: touch; // 为了滚动顺畅
}table tbody::-webkit-scrollbar {display: none; // 隐藏滚动条，不需要可取消
}table thead, table tbody tr {display:table;width:100%;table-layout:fixed;//fixed：固定表格布局
}table thead {width: calc( 100% - 1em )//函数计算宽度
}

关键点详解：

一、表格中的table-layout属性讲解

1、定义和用法

tableLayout 属性用来显示表格单元格、行、列的算法规则。

table-layout有三个属性值：auto、fixed、inherit。

fixed：固定表格布局
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

如果指定了单元格的宽度，则会按指定的宽度限定每个单元格宽度，跟内容无关（如果指定的是比例，会永远保持这个比例），这样就可能出现内容飘到单元格之外的情况。
如果没有指定单元格的宽度，则会根据table的总宽度平分到每个单元格。

auto：自动表格布局
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

自动表格布局时，设置单元格的宽度是没有效的。

说明
该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。
table表格中的内容如果是中文，一般情况下都会自动换行。但如果内容是英文或数字，内容过长时文字会飘到单元格之外，也就是内容不会自动换行，这时候需要配合属性word-wrap:break-word;和word-break:break-all;一起使用。

2、CSS3 word-wrap 属性

word-wrap 属性允许长单词或 URL 地址换行到下一行（是否允许换行）。
word-wrap: normal | break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

3、CSS3 word-break 属性

word-break 属性规定自动换行的处理方法（自动换行的方法）；

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

二、CSS calc() 函数

定义与用法

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

函数	chrome	IE	fire fox	safari	opera
calc()	26.0 19.0 -webkit-	9.0	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

示例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {width: calc(100% - 50px);background: #eee;
}
</style>
</head>
<body>
<div class="test">我的宽度为100% - 50px</div>
</body>
</html>

为table标签内的tbody添加滚动条相关推荐

element table滚动条占宽度_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
html 滚动条_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
iframe 滚动条不显示_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
HTML页面内Div内容添加滚动条
Div内容添加滚动条:核心代码style="height: 500px; overflow:scroll" 事例: <div class="container&qu ...
Bootstrap——table标签使用横向滚动条解决方案
官方文档 https://v4.bootcss.com/docs/content/tables/ 解决方案方法一:原生CSS 给table标签添加CSS属性 table显示滚t动条,要先把table ...
织梦文章页自动添加TAG标签内链插件（可设置内链总数）
织梦文章页自动添加TAG标签内链介绍 1.织梦文章页把TAG作为内链,增加网站内链,可以让蜘蛛多爬,多收录,能有效提高网站TAG标签的收录及排名. 2.织梦tag标签对应的链接都是列表页面,和文章分类 ...
WordPress纯代码实现自动为文章添加标签及标签内链接
既然大家都知道Tag标签的作用,但是还是有很多站长不为文章添加Tag标签,主要原因就是每次发布文章都要手动为文章添加Tag标签,实在是太麻烦了. 那么有没有可能让WordPress站点自动为文章添加以 ...
extjs给panel添加滚动条_ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...

为table标签内的tbody添加滚动条