當 border-radius 無法直接應用於表格行時，如何使用 CSS 實現整個表格的圓角？

將邊框半徑應用於表格行

許多開發人員在嘗試自訂表格行的外觀時面臨困難(

）。當嘗試將 border-radius 應用於 tr 元素時，就會出現這樣的挑戰。

要解決此問題，必須了解 border-radius 只能套用於表格中的單一儲存格 (

) ，而不是行或表格本身。然而，有一個聰明的解決方案可以實現整個表格的圓角：

CSS 樣式

關鍵技巧在於使用邊框分隔每個單元格的表格邊框-崩潰：單獨的財產。此外，可以設定邊框樣式來微調外觀。以下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>

HTML 範例

定義CSS 樣式規則後，將它們應用到您的表格中就很簡單：

<code class="html"><table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr>
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table></code>

此解決方案將單一單元格轉換為構建塊，從而可以完全控製表格的外觀，包括圓角。

以上是當 border-radius 無法直接應用於表格行時，如何使用 CSS 實現整個表格的圓角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！