如何使用 CSS 為表格單元格新增圓角？

對表格單元格套用邊框半徑

要為表格行(tr) 新增圓角，請考慮下列方法：

• CSS 限制：請注意，您不能直接將border-radius 套用至tr 或table 元素。相反，您必須將其套用至單一表格儲存格 (td)。
• 單元格的單獨邊框和內邊距：

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

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

• 角樣式：

<code class="css">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; }</code>

• 頂部和左側單元格的邊框樣式：

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

此技術允許在桌子上創建圓角，同時保持所需的邊框和間距。

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