表格中border-collapse属性

页面制作中最头痛的，表格的边框算是其一了。一不小心就会出现双重线

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

 

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

 

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

运行后的样子：