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 ;）

超出两行，再以省略号显示（不兼容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>与<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;
}

 

转载于:https://www.cnblogs.com/anyxl/p/9318755.html