J'essaie de mettre une ligne sous la première ligne de mon tableau mais cela ne fonctionne pas. J'ai suivi le guide des écoles w3 pour les tableaux mais il ne montre pas comment mettre des lignes. J'ai essayé de mettre une bordure sur le th, mais cela laisse un vide dans la ligne. quand j'essaye de mettre une bordure sur le tr, ça ne marche pas.
Voici mon code:
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
tr {
border-style: solid;
border-width: 2px;
border-color: black;
}
4 Réponses :
Les tableaux sont uniquement destinés à être formatés via des cellules individuelles. Si vous essayez de styliser une balise tr , vous devez vous assurer que vous avez border-collapse: collapse sur votre table . Pour cibler uniquement le premier tr spécifiquement, définissez votre spécificateur sur tr: first-of-type et ajoutez un border-bottom: 2px solid black .
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
table {
border-collapse: collapse;
}
tr:first-of-type {
border-bottom: 2px solid black;
}
Vous pouvez essayer de réduire le tableau des bordures et ensuite définir la bordure pour vous th
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
tr th{
border-bottom:2px solid #000;
}
table {
border-collapse: collapse
}
Ajoutez ceci à vos styles
tr:first-child th {
border-bottom: solid 1px black;
}
Ce que vous faites est de sélectionner les "th" cellules dans une ligne de tableau si cette ligne est le premier enfant de son parent. Et puis vous appliquez le style spécifié.