css ：border-collapse屬性解決Table的邊框問題

表格的邊框算是頁面製作中最頭痛的，帶邊線的表格在之前非常討厭做，不過今天終於解決了這個問題，下面將樣本與大家分享下頁面製作中最頭痛的，表格的邊框算是其一了，很討厭做帶邊線的表格，今天終於解決了這個問題

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屬性之前和之後的對比圖