如何使用 CSS 為表格的每一行新增底部邊框？

在表格行底部加上邊框

問題

使用 CSS 在每個表格行的底部加上邊框似乎具有挑戰性。直接設定 tr 元素的樣式或將 CSS 規則套用至 tr 不會產生所需的結果。有沒有更好的方法可以在不使用內聯樣式的情況下實現此目的？

解決方案

要使用 CSS 成功地將邊框新增到每個表格行的底部，您可以使用 border-collapse 屬性。透過在表格 CSS 規則中將此屬性設為折疊，表格邊框會合併在一起。

table { 
    border-collapse: collapse; 
}

這允許您使用 tr CSS 規則中的 border-bottom 屬性來套用邊框樣式。

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

範例

考慮3x3 table:

<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>

應用CSS 規則會產生一個只在每行底部有邊框的表格：

table {
  border-collapse: collapse;
}

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

以上是如何使用 CSS 為表格的每一行新增底部邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！