Home > Article > Web Front-end > css: border-collapse attribute solves the border problem of Table
The borders of tables are the most troublesome in page creation. Tables with borders were very annoying to make before, but today I finally solved this problem. I will share an example with you below.
One of the biggest headaches in page creation is the border of the table. I hate making tables with borders. I finally solved this problem today
border-collapseAttribute Very good solution to the problem that has been entangled for a long time
CSS
The code is as follows:
.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: Before using the border-collapse attribute And the comparison picture after
The above is the detailed content of css: border-collapse attribute solves the border problem of Table. For more information, please follow other related articles on the PHP Chinese website!