Berikut ialah kod saya
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>
Saya cuba mencapai kesan ini [1]: https://i.stack.imgur.com/qnBdQ.png Walau bagaimanapun, jadual saya hanya mempunyai satu sempadan, tiada "sempadan lajur", bukannya sempadan berganda yang dilihat dalam gambar. Saya ingin tahu cara terbaik untuk mencapai kesan yang saya inginkan.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda perlu menukar struktur jadual kerana anda pada asasnya ingin mempunyai sempadan pepejal di sekeliling sel meja dan kemudian sempadan pepejal di sekeliling keseluruhan meja, jika tidak, anda akan mendapat kotak di sudut.
<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>