The following is my 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>
I'm trying to achieve this effect [1]: https://i.stack.imgur.com/qnBdQ.png However, my table only has one border, missing the "column borders", instead of the double borders seen in the picture. I'd like to know the best way to achieve the effect I want.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You need to change the structure of the table because you basically want a solid border around the table cells and then a solid border around the entire table, otherwise you'll get boxes at the corners.
<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>