Home  >  Article  >  Web Front-end  >  css: border-collapse attribute solves the border problem of Table

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

黄舟
黄舟Original
2017-06-30 09:31:411735browse

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!

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