浅谈table

在做一个小系统的时候，数据展示使用table，在数据超过父容器的时候以滚动条的形式展示，折腾了半天，发现以为简单的table，用起来咋效果那么的神奇，我都无法直视了，只好认真地撸一把table的一些属性。

一、设置table边框样式

1、元素属性样式设置

border: 设置表格边框，同时每个单元格都带有边框，对应css的table,th,td{border:1px solid #000}

cellspacing: 相邻单元格的间距，对应css的border-collapse:collapse（边框合并）

cellpadding: 每个单元格的内边距，对应css的padding

<div>
    <table border="1" cellspacing="0" cellpadding="0">
       <tr>
           <th>序号</th>
           <th>需求编号</th>
           <th>项目名称</th>
           <th>主题</th>
           <th>备注</th>
           <th>提出部门</th>
           <th>所属项目组</th>
           <th>创建时间</th>
           <th>创建用户</th>
           <th>更新用户</th>
       </tr>
       <tr>
           <td>1</td>
           <td>0x342097</td>
           <td>我是一个小系统</td>
           <td>我真的是一个小系统</td>
           <td>我真的真的是一个小系统</td>
           <td>开发部</td>
           <td>TAG</td>
           <td>2019-02-14</td>
           <td>huang</td>
           <td>chen</td>
       </tr>
       ......
   </table>
</div>

2、css样式 

table,th,td{
     border:1px solid #000;
}
table{
     border-collapse: collapse;
}

从效果图中可以看出使用cellspacing="0"，合并单元格边框，是叠加的效果，也就是边框实际上是1px，但看起来就跟2px一样的效果，而使用border-collapse:collapse合并的边框依然是1px的效果。 

二、table、th、td宽度设置

一般情况下，很少对table进行设置width，如果要设置，同样有两种方式：HTML属性width和css的width。

th、td的宽度不建议使用HTML属性width设置，而是使用css的样式设置，这里需要注意一点：如果table设置width或者table没有设置width，但包裹table的父元素设置了宽度，在这种情况下设置th/td的宽度总和超过了父容器设置的宽度，th/td会按照比例进行分配单元格的宽度，不会显示实际上设置的宽度值。

如下图，我设置了div的宽度为800px,第一列的宽度为400px,最后一列300px,但实际上显示的和设置的宽度不符合。

div{
    border: 1px solid #eee;
    overflow: auto;
    background-color:#fff;
    box-shadow: 3px 3px 10px #ccc;
    border-radius: 5px;
    padding:20px;
    box-sizing: border-box;
    width: 800px;
}
table,th,td{
    border:1px solid #000;
}
table{
    border-collapse: collapse;
}
table tr:first-child th:first-child{
     width:400px;
}
table tr:first-child th:last-child{
     width:300px;
}

如果想要让单元格显示出设置的实际宽度值，那么在th/td中包裹一个元素，对元素进行宽度的设置就可以了。如下：

<div>
    <table>
       <tr>
           <th><span>序号</span></th>
           <th><span>需求编号</span></th>
           <th><span>项目名称</span></th>
           <th><span>主题</span></th>
           <th><span>备注</span></th>
           <th><span>提出部门</span></th>
           <th><span>所属项目组</span></th>
           <th><span>创建时间</span></th>
           <th><span>创建用户</span></th>
           <th><span>更新用户</span></th>
       </tr>
       <tr>
           <td><span>1</span></td>
           <td><span>0x342097</span></td>
           <td><span>我是一个小系统</span></td>
           <td><span>我真的是一个小系统</span></td>
           <td><span>我真的真的是一个小系统</span></td>
           <td><span>开发部</span></td>
           <td><span>TAG</span></td>
           <td><span>2019-02-14</span></td>
           <td><span>huang</span></td>
           <td><span>chen</span></td>
       </tr>
       ......
   </table>
</div>

span{
     display: inline-block;
}
table tr:first-child th:first-child span{
      width:400px;
}
table tr:first-child th:last-child span{
      width:300px;
}

三、来个小栗子 

body{
      background-color: #eee;
      margin:50px;
      font-family: serif;
    }
div{
      border: 1px solid #eee;
      overflow: auto;
      background-color:#fff;
      box-shadow: 3px 3px 10px #ccc;
      border-radius: 5px;
}
table{
      border-collapse:collapse;
}
table tr th,table tr td{
      padding:10px 5px;
}
table tr th{
      background-color:#BAC3FF;
      color:#fff;
      text-align: left;
}
table tr td{
      border-bottom:2px solid #fff;
}
table tr:nth-child(even) td{
      background-color: #F5F8FD;
}
table tr:nth-child(odd) td{
      background-color:#FCFDFF;
}
table tr th span,table tr td span{
      display: inline-block;
      min-width:130px;
      padding-left:8px;
      border-left:1px solid #ddd;
}
table tr th:first-child span,table tr td:first-child span{
      border-left: none;
}