為什麼使用 CSS 時我的表格行底部邊框不顯示？

如何在表格行的底部加上邊框

您有一個 3x3 的表格，並且想要在每行的底部新增邊框。您嘗試將 style 屬性直接新增到

中元素，但這不起作用。然後你加入了這樣的CSS：

tr {
border-bottom: 1pt solid black;
}

但這仍然不起作用。您喜歡使用 CSS，因此不需要為每一行新增樣式屬性。

問題是您尚未將 border-collapse:collapse 新增到表格規則中。此屬性告訴瀏覽器折疊相鄰單元格的邊框。如果沒有它，邊框將繪製在彼此之上，從而很難看到線條。

要解決這個問題，請將border-collapse:collapse 加入表格規則：

table {
border-collapse: collapse;
}

這裡有一個例子：

table {
border-collapse: collapse;
}

tr {
border-bottom: 1pt solid black;
}

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

這將在每行的底部添加一個1pt 的黑色邊框你的桌子。

以上是為什麼使用 CSS 時我的表格行底部邊框不顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！