首頁 > web前端 > css教學 > 當直接邊框半徑套用受到限制時,如何使用 CSS 將圓角套用到表格行?

當直接邊框半徑套用受到限制時,如何使用 CSS 將圓角套用到表格行?

Linda Hamilton
發布: 2024-10-26 21:26:03
原創
627 人瀏覽過

How can I apply rounded corners to table rows using CSS when direct border radius application is limited?

將邊框半徑套用於表格行

自訂表格行的外觀(

) 時,可以套用邊框半徑直接對他們進行限制。以下是使用 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板