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属性

扫描二维码关注公众号，回复： 2186102 查看本文章

 4.给td加滚动条

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

5.隐藏滚动条

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

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

 

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