當直接邊框半徑套用受到限制時，如何使用 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>

此解決方案設定各個表格資料儲存格 (

) 的邊框，以在行周圍形成所需的邊框。 border-collapse 和 border-spacing 屬性可確保儲存格分開且不重疊。

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

透過應用此解決方法，您可以為表格行實現圓角，從而有效增強其視覺吸引力。

以上是當直接邊框半徑套用受到限制時，如何使用 CSS 將圓角套用到表格行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！