如何僅使用 CSS 實現圓桌角？

僅使用CSS 實現圓角表格角

尋求僅使用CSS 在HTML 表格上實現圓角的用戶可能會遇到困難，無法找到保留CSS 的解決方案表格的邊框。這裡有一個解決這個問題的綜合方法：

CSS實作

table {
  border-collapse: separate;
  border: solid black 1px;
  border-radius: 6px;
}

td, th {
  border-left: solid black 1px;
  border-top: solid black 1px;
}

th {
  background-color: blue;
  border-top: none;
}

td:first-child, th:first-child {
  border-left: none;
}

說明

首先，設定邊框-折疊：分離允許單元格之間出現邊框。然後，border 屬性定義表格的外邊框。 border-radius 建立圓角。

在儲存格和標題中，border-left 和 border-top 分別指定垂直和水平邊框。標題具有藍色背景以顯示圓角。此外，刪除了標題的上邊框，以防止與表格的外邊框重疊。

最後，刪除第一個儲存格和標題上的左邊框可以消除不必要的垂直邊框。這會導致所有角落單元格變成圓角，同時保留表格內的垂直和水平邊框。

用法範例

<table>
  <thead>
    <tr>
      <th>Blah</th>
      <th>Fwee</th>
      <th>Spoon</th>
    </tr>
  </thead>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
  <tr>
    <td>Blah</td>
    <td>Fwee</td>
    <td>Spoon</td>
  </tr>
</table>

以上是如何僅使用 CSS 實現圓桌角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！