如何在 HTML 中為表格行新增圓角？

使用邊框半徑設定表格行樣式

在 HTML 表格中，

元素代表表格行。雖然可以使用邊框折疊為表格行添加實心邊框，但向行添加圓角卻是一個挑戰。

要克服此限制，您可以使用以下CSS 樣式：

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}

tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }

tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }</code>

這些樣式完成以下任務：

• 將border-collapse 屬性設為分離，以將邊框保留在表格儲存格內。
• 將實心邊框套用於 。
• 抑制大多數 的頂部和左側邊框元素。
• 對第一行的左上角和右上角套用圓角。
• 對最後一行的左下角和右下角套用圓角。
• 恢復 的頂部邊框第一行中的元素和 的左邊框第一列中的元素。

以上是如何在 HTML 中為表格行新增圓角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！