如何在 HTML 中为表格行添加圆角？

使用边框半径设置表格行样式

在 HTML 表格中，

元素代表表格行。虽然可以使用边框折叠为表格行添加实心边框，但向行添加圆角却是一个挑战。

要克服此限制，您可以使用以下 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 属性设置为分离，以将边框保留在表格单元格内。
• 将实心边框应用于 。
• 抑制大多数 的顶部和左侧边框元素。
• 对第一行的左上角和右上角应用圆角。
• 对最后一行的左下角和右下角应用圆角。
• 恢复 的顶部边框第一行中的元素和 的左边框第一列中的元素。

以上是如何在 HTML 中为表格行添加圆角？的详细内容。更多信息请关注PHP中文网其他相关文章！