如何將邊框半徑套用至 HTML 中的表格行？-css教學-PHP中文網

如何將邊框半徑套用至 HTML 中的表格行？

Linda Hamilton

發布： 2024-10-28 07:12:30

原創

336 人瀏覽過

How to Apply Border Radius to Table Rows in HTML?

如何在表格行上套用邊框半徑

在設計HTML 表格樣式時，開發人員在嘗試將樣式套用於表格行(

) 時經常會遇到限制。當使用 border-collapse 設定邊框樣式時，允許在周圍設定邊框。表中的元素，它不會擴展到 ;元素本身。

嘗試將邊框半徑（-moz-border-radius 或現代 border-radius）應用於表格行時會出現一個常見問題。不幸的是，這個屬性不能直接套用於

。

解決方案：

鑑於此限制，需要一種解決方法來實現表格行上的圓角。此解決方案涉及將邊框樣式策略套用至各個

元素。 elements:

<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:separate 屬性至關重要，因為它允許將邊框單獨應用於每個單元格，從而實現所需的樣式效果。

以上是如何將邊框半徑套用至 HTML 中的表格行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！