css : l'attribut border-collapse résout le problème de bordure du tableau

La bordure du tableau est la plus gênante dans la création de pages. Les tableaux avec des bordures étaient très ennuyeux à réaliser auparavant, mais aujourd'hui j'ai enfin résolu ce problème, je vais partager un exemple avec vous ci-dessous. L'un des plus gros problèmes dans la création de pages est la bordure du tableau. Je déteste créer des tableaux avec des bordures. Aujourd'hui, j'ai finalement résolu ce problème

border-collapseattribut. Très bonne solution au problème qui est enchevêtré depuis longtemps
CSS

Le code est le suivant :

.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 : Utilisez la bordure -Image de comparaison avant et après l'attribut de réduction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!