以下是我的程式碼
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>