table的td、th的一些样式问题（宽度，边框，滚动条，多行多列的表头thead固定）

您所在的位置：网站首页 › 表格中宽度设置 › table的td、th的一些样式问题（宽度，边框，滚动条，多行多列的表头thead固定）

table的td、th的一些样式问题（宽度，边框，滚动条，多行多列的表头thead固定）

2024-07-07 00:47| 来源: 网络整理| 查看: 265

1. 给table加边框

table{ border-collapse: collapse; /*表格的边框合并为一个单一的边框*/ } table, table tr th, table tr td { border:1px solid #ccc; }

还有种傻傻的方法：

table{ border-top:1px solid #ccc; border-left:1px solid #ccc; } table tr td, table tr th{ border-right:1px solid #ccc; border-bottom: 1px solid #ccc; }

2.给table的th固定宽度

① 设置table的宽度

② table设置table-layout : fixed ;

③ 设置th宽度

3.给table加滚动条

在table外包一层div，div设置overflow属性

div{ overflow-x: scroll; }

4.给td加滚动条

在td里加一层div，div宽度100%，且设置overflow属性

5.td里嵌套table，且table有滚动条

　① 最外层的table加上宽度、table-layout:fixed;word-break:break-all;（防止内层的table内容过长，将外层td撑开）

②在td和第二层table之间，加一层div;div设置overflow属性，再给内层table的th设置宽度就行了，

6.隐藏滚动条

.classname :: -webkit-scrollbar{ display:none; }

7.如下图，th在左侧，右侧td，第一行的td设置了colspan=“8”，使用了colspan后，设置列宽(th/td的宽度)不生效：

解决办法：添加colgroup属性，col设置列的宽度。（若td设置了colspan,且colgroup设置了col的宽度，但ie下宽度仍不生效，记得：table加上样式table-layout : fixed ;）

8. 设置td的内容超出部分以省略号显示（title属性展示完整数据）

table tr td { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }

（若不生效，给 table 设置宽度和table-layout : fixed ;）

超出两行，再以省略号显示（不兼容ie）： table table td{ overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:break-all; }

9. 兼容问题：ie9下，表格出现空格以及错位。

　如图：第一行的操作人右移了，出现了空格。

解决办法：网上查，这是ie9的一个bug，与间有空行时会发生错位。所以，去除掉td标签内的空格。

10. tr之间出现空白行

　如图：我在用字符串拼接，生成表结构的时候，发现渲染出的表结构tr之间有空行

　　var html ='名称内容名称内容'; 　　$('tbody').append(html);

　　检查发现：坑啊，结束标志写错了，写错成了，记录下来，不知道有没有人和我一起犯蠢。

11. td 在ie浏览器里没有边框，谷歌浏览器正常

　　检查发现，td设置了相对定位position:relative,在ie下有兼容问题，

解决：设置background-clip属性（规定背景的绘制区域） ----->

table tr td { padding: 0px; height: 40px; position: relative; background-clip: padding-box; }

12. 多行多列的表头thead固定

效果图：

多行多列的表头固定 #app{ max-width: 400px; margin: 20px auto; overflow: hidden; } .head-list{ overflow: hidden; /*隐藏thead多余内容和滚动条*/ } .body-list{ overflow: auto; max-height: 100px; min-height: 0%; /* 设置了overflow：auto，在ie9可能会有兼容问题：在td里的input输入内容时，div的高度会增大 */ } .head-list table{ border-bottom: 0 none; } table{ border: 1px solid #e7e7e7; border-collapse: collapse; table-layout: fixed; font-size: 12px; color: #666; width: 700px; } thead tr { background-color: #f2f2f2; height: 45px; } thead .secondTr th{ width: 100px; /* 7*100 大于总宽度400 */ border-bottom: 0 none; } th,td{ border: 1px solid #e7e7e7; text-align: center; box-sizing: border-box; } table tbody tr td { width: 100px; padding: 15px 0px; } 水果人名玩具苹果香蕉 Jay Lucy Nick 小汽车娃娃 2个 2个 2个 2个 2个 2个 2个 3个 3个 3个 3个 3个 3个 3个 4个 4个 4个 4个 4个 4个 4个 5个 5个 5个 5个 5个 5个 5个 // 不加js的情况下，此时页面tbody已经出现横纵滚动条，但在滚动横向滚动条时，表头不动（见图1）。所以要设置一个scroll事件，让表头随着表体滚动 $('.body-list').on('scroll', function () { $(".head-list").scrollLeft($('.body-list').scrollLeft()); }); var divHeight = $(".body-list").height(); var tableHeight = $(".body-list table").height(); // 出现纵向滚动条时，给表头div添加margin样式(略丑，但是不加margin，会导致横向条滚到最右，上下表格发生错位，见图2) if(tableHeight > divHeight){ $(".head-list").css('margin-right','17px'); }

图1：

图2：

【本文地址】

table的td、th的一些样式问题（宽度，边框，滚动条，多行多列的表头thead固定）

table的td、th的一些样式问题（宽度，边框，滚动条，多行多列的表头thead固定）

今日新闻

推荐新闻