以下是我的代码
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>
我正在尝试实现这个效果 [1]: https://i.stack.imgur.com/qnBdQ.png 然而，我的表格只有一个边框，缺少“列边框”，而不是图片中看到的双边框。我想知道如何实现我想要的效果的最佳方法。
P粉8721016732023-09-12 00:46:05
你需要改变表格的结构，因为你基本上想要在表格单元格周围有一个实线边框，然后在整个表格周围有一个实线边框，否则你会在角落处得到方框。
<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>