css: border-collapse attribute solves the border problem of Table

黄舟
Release: 2017-06-30 09:31:41
Original
1750 people have browsed it

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;
}
Copy after login

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>
Copy after login


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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template