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

最新推荐文章于 2024-07-09 17:01:29 发布

Mr_lee123

最新推荐文章于 2024-07-09 17:01:29 发布

阅读量9.2k

点赞数 5

分类专栏： css 文章标签： table滚动条

本文链接：https://blog.csdn.net/lihaofeifei/article/details/84388784

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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>

Mr_lee123

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
为table标签内的tbody添加滚动条

CSS代码演示table tbody { display:block; height:200px; //高度根据实际自定义 overflow-y:scroll; -webkit-overflow-scrolling: touch; // 为了滚动顺畅 }table tbody::-webkit-scrollbar { display: none...
复制链接

扫一扫

专栏目录