一个属性解决Table的边框问题（border-collapse ）

页面制作中最头痛的，表格的边框算是其一了，很讨厌做带边线的表格，今天终于解决了这个问题

border-collapse属性 很好的解决了纠结了很久的问题

CSS

.table{border: 1px solid #ccc;border-collapse: collapse; width:80%;}.table th,.table td{border: 1px solid #ccc;padding: 10px;}

Html

<table class="table">

  <thead>

    <tr>

      <th>id</th>

      <th>作者</th>

      <th>书名</th>

      <th>内容</th>

      <th>分类</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>001</td>

      <td>唐家三少</td>

      <td>斗破苍穹</td>

      <td>斗破苍穹斗破苍穹</td>

      <td>玄幻</td>

    </tr>

    <tr class="success">

      <td>001</td>

      <td>唐家三少</td>

      <td>斗破苍穹</td>

      <td>斗破苍穹斗破苍穹</td>

      <td>玄幻</td>

    </tr>

  </tbody>

</table>

PS：使用border-collapse属性之前和之后的对比图