如何使用 CSS 为表格单元格添加圆角？

对表格单元格应用边框半径

要向表格行 (tr) 添加圆角，请考虑以下方法：

• CSS 限制：请注意，您不能直接将 border-radius 应用于 tr 或 table 元素。相反，您必须将其应用于单个表格单元格 (td)。
• 单元格的单独边框和内边距：

<code class="css">table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  border: solid 1px #000;
  border-style: none solid solid none;
  padding: 10px;
}</code>

• 角样式：

<code class="css">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; }</code>

• 顶部和左侧单元格的边框样式：

<code class="css">tr:first-child td { border-top-style: solid; }
tr td:first-child { border-left-style: solid; }</code>

此技术允许在桌子上创建圆角，同时保持所需的边框和间距。

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