Voici mon code
table {
border: 1px solid;
width: 20.5%;
}
<table >
<tr>
<th align = "left">Ann-Maree Smith </th>
<th align = "left">Mitz Perez</th>
</tr>
<tr>
<td>Bld 40:133, Wollongong</br>Campus </td>
<td>Bld 4:105, Wollongong</br>Campus</td>
</tr>
<tr>
<td>(02) 4221 4714 </td>
<td>(02) 4221 3833 </td>
</tr>
<tr>
<td>Mon-Fri</td>
<td>Mon-Fri</td>
</tr>
<tr>
<td>ams@uow.edu.au</td>
<td>mperez@uow.edu.au</td>
</tr>
</table>
J'essaie d'obtenir cet effet [1] : https://i.stack.imgur.com/qnBdQ.png Cependant, mon tableau n'a qu'une seule bordure, il manque les "bordures de colonnes", au lieu des doubles bordures vues sur l'image. J'aimerais connaître la meilleure façon d'obtenir l'effet souhaité.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous devez modifier la structure du tableau car vous souhaitez essentiellement avoir une bordure solide autour des cellules du tableau, puis une bordure solide autour de l'ensemble du tableau, sinon vous obtiendrez des cases dans les coins.
<head> <style> table { border: 1px solid; width: 20.5% } tr > td { border: 1px solid; } tr > td > span.name { font-weight: bold; } tr > td > span { display: block; } </style> </head> <body> <table > <tr> <td> <span class="name">Ann-Maree Smith</span> <span>Bld 40:133, Wollongong</br>Campus</span> <span>(02) 4221 4714 </span> <span>Mon-Fri</span> <span>ams@uow.edu.au</span> </td> <td> <span class="name">Mitz Perez</span> <span>Bld 4:105, Wollongong</br>Campus</span> <span>(02) 4221 3833 </span> <span>Mon-Fri</span> <span>mperez@uow.edu.au</span> </td> </tr> </table> </body>