表格的邊框算是頁面製作中最頭痛的,帶邊線的表格在之前非常討厭做,不過今天終於解決了這個問題,下面將示例與大家分享下
頁面製作中最頭痛的,表格的邊框算是其一了,很討厭做帶邊線的表格,今天終於解決了這個問題
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屬性之前和之後的對比圖
以上是css :border-collapse屬性解決Table的邊框問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!