table的td、th的一些样式问题（宽度，边框，滚动条）
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 ;）
<colgroup>
<col width = '20%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
</colgroup>
8. 设置td的内容超出部分以省略号显示（title属性展示完整数据）
table tr td {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
（若不生效，给 table 设置宽度和table-layout : fixed ;）
table table td{
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:;
-webkit-box-orient:vertical;
word-wrap:break-word;
word-break:break-all;
}
9. 兼容问题：ie9下，表格出现空格以及错位。
如图：第一行的操作人右移了，出现了空格。
解决办法： 网上查，这是ie9的一个bug， </td>与<td>间有空行时会发生错位。所以，去除掉td标签内的空格。
10. tr之间出现空白行
如图：我在用字符串拼接，生成表结构的时候，发现渲染出的表结构tr之间有空行
var html ='<tr><th>名称</th><td>内容</td><th>名称</th><td>内容</td></tr>';
$('tbody').append(html);
检查发现：坑啊，结束标志写错了，</tr>写错成了<tr/>，记录下来，不知道有没有人和我一起犯蠢。
11. td 在ie浏览器里 没有边框，谷歌浏览器正常
检查发现，td设置了相对定位position:relative,在ie下有兼容问题，
解决：设置background-clip属性（规定背景的绘制区域） -----> 
table tr td {
padding: 0px;
height: 40px;
position: relative;
background-clip: padding-box;
}
12. 多行多列的表头thead固定
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多行多列的表头固定</title>
<style>
#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;
}
</style>
</head>
<body>
<div id="app">
<div class="head-list">
<table>
<thead>
<tr>
<th colspan="2">水果</th>
<th colspan="3">人名</th>
<th colspan="2">玩具</th>
</tr>
<tr class="secondTr">
<th>苹果</th>
<th>香蕉</th>
<th>Jay</th>
<th>Lucy</th>
<th>Nick</th>
<th>小汽车</th>
<th>娃娃</th>
</tr>
</thead>
</table>
</div>
<div class="body-list">
<table>
<tr>
<td>2个</td>
<td>2个</td>
<td>2个</td>
<td>2个</td>
<td>2个</td>
<td>2个</td>
<td>2个</td>
</tr>
<tr>
<td>3个</td>
<td>3个</td>
<td>3个</td>
<td>3个</td>
<td>3个</td>
<td>3个</td>
<td>3个</td>
</tr>
<tr>
<td>4个</td>
<td>4个</td>
<td>4个</td>
<td>4个</td>
<td>4个</td>
<td>4个</td>
<td>4个</td>
</tr>
<tr>
<td>5个</td>
<td>5个</td>
<td>5个</td>
<td>5个</td>
<td>5个</td>
<td>5个</td>
<td>5个</td>
</tr>
</table>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// 不加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');
}
</script>
</body>
</html>
图1：
图2：
table的td、th的一些样式问题（宽度，边框，滚动条）的更多相关文章
- ie7、ie8 下Table 中 td 列固定宽度 未按样式设定显示 曲线解决方案
<!doctype html> <html> <head> <meta charset='utf-8'> <style> .title {b ...
- 当Table中td内容为空时，显示边框的办法
1. 在 table的css里面加: border-collapse:collapse;在 td 的css里面加: empty-cells:show; 2 .最简单的就是 在TD里写个 说明: ...
- 如何让table中td宽度固定
table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...
- table中td内容过长 省略号显示
首先设置 css样式: table { table-layout: fixed;} HTML中的table代码: <tr> <th class="col-md-1" ...
- table中td的宽度不随文字变宽
1.设置了table的宽度后,宽度仍然不固定,td的内容一多,很容易吧table撑变形.有些时候我们需要设置固定的宽度. 解决办法 table的css 加入样式 table-layout:fixed ...
- 关于table的td和ul元素li隔行变色的功能实现
table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{ background-color:颜 ...
- table的td的1%
使用media-obj和media-bd类似的样式,大多数采用的是display: table-cell(即是table中td)来实现.当然设置display是不够,还要根据情况设置width.如下面 ...
- html中table,tr,td
table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...
- <td></td>标签的border 样式在浏览器中显示不出来
问题: 在一些浏览器中比如360浏览器的兼容模式下, <td style="border:1px solid red;"></td> 标签 中 的内容为空时 ...
随机推荐
- C#-MDI-多窗口通信方法总结
总结C#中窗体间传递数据的几种方法 (由别人的方法整理) 转自:http://blog.csdn.net/daisy423xu/article/details/1579854 在编写C#windows ...
- 有关从经典部署模型迁移到 Azure Resource Manager 部署模型的常见问题
此迁移计划是否影响 Azure 虚拟机上运行的任何现有服务或应用程序? 不可以. VM(经典)是公开上市的完全受支持的服务. 你可以继续使用这些资源来拓展你在 Azure 上的足迹. 如果我近期不打算 ...
- 了解 Azure VM 的系统重启
有时 Azure 虚拟机 (VM) 可能重启,即使没有明显原因,也没有证据表明用户发起重启操作. 本文列出了可导致 VM 重启的操作和事件,并针对如何避免意外重启问题或减少该问题影响提供见解. 配置 ...
- .net core系列之《对AOP思想的理解及使用AspectCore实现自定义日志拦截》
对于AOP这个名词,相信对于搞过MVC开发的人来说,都很熟悉,里面各种各样的Filter简直是将AOP体现到了极致. 那么什么是AOP呢? AOP(Aspect Oriented Programmin ...
- Oracle常用名词解释
好久没做rac,最近要做架构梳理,这里针对Oracle常用的名词缩写,这里做个记录,希望对大家有所帮助. RAC 全称是Real Application Cluster,oracle的高可用群集,即实 ...
- Effective C++(10) 重载赋值操作符时，返回该对象的引用（retrun *this）
问题聚焦: 这个准则比较简短,但是往往就是这种细节的地方,可以提高你的代码质量. 细节决定成败,让我们一起学习这条重载赋值操作符时需要遵守的准则吧. 还是以一个例子开始: Demo // 连锁赋值 x ...
- Python学习---DjangoForm的总结大全
DjangoForm基础知识总结 1.Form是什么东西? 用于验证用户请求数据合法性的一个组件 2. Django的Form的实现步骤: a. 创建一个验证用户请求的模板 from django i ...
- codeforces 1000F One Occurrence（线段树、想法）
codeforces 1000F One Occurrence 题意 多次询问lr之间只出现过一次的数是多少. 题解 将查询按照左端点排序,对于所有值维护它在当前位置后面第二次出现是什么时候,那么查询 ...
- 几个第三方yum源
1.repoforge 官方网站:http://repoforge.org/ 2.epel http://fedoraproject.org/wiki/EPEL 3.Remi http://rpms. ...
- 前端——实用UI组件库
Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...