如何设置HTML表格的圆角边框？BORDER-RADIUS样式应用-html教程-PHP中文网

table 直接加 border-radius 无效，因浏览器将 table 视为边框分散在单元格的容器，尤其 border-collapse: collapse 下外边框不存在，圆角无作用对象；需改用 border-collapse: separate + 精准角控制，或外层 div 包裹 + overflow: hidden 裁剪。

如何设置html表格的圆角边框？border-radius样式应用

table 直接加 `border-radius` 为什么没反应？

因为浏览器默认把 table 当作“边框分散在单元格上”的容器，不是独立可渲染圆角的块级元素。尤其当用了 border-collapse: collapse（绝大多数框架、生成器默认启用），border-radius 会被完全忽略——这不是 bug，是规范行为。

常见错误现象：table { border-radius: 8px; border: 1px solid #ccc; } 写了但四角还是直的；或者圆角只出现在左上角，其他角被单元格直角顶破。

根本原因：圆角作用对象是“外边框轮廓”，而 collapse 模式下表格没有独立外边框
overflow: hidden 单独加在 table 上无效，因为内部单元格仍会溢出
别指望 th/td 统一设 border-radius 就能整齐收口——相邻单元格边框会打架

用 `border-collapse: separate` + 精准角控制最可控

这是兼容性好、逻辑清晰、无需额外 wrapper 的方案。核心是让每个单元格拥有独立边框，再只给特定角落加圆角。

关键 CSS：

table {
  border-collapse: separate;
  border-spacing: 0;
}
th:first-child { border-top-left-radius: 8px; }
th:last-child { border-top-right-radius: 8px; }
tr:last-child > td:first-child { border-bottom-left-radius: 8px; }
tr:last-child > td:last-child { border-bottom-right-radius: 8px; }

必须设 border-spacing: 0，否则单元格间出现白缝，圆角看起来断开
圆角值建议用 em 或 px，避免用 %（单元格宽高不一致会导致变形）
如果表格有 colspan 或 rowspan，第一行/最后一行的“首尾”选择器可能失效，需手动加 class 标记目标单元格

用外层 `div` 包裹 + `overflow: hidden` 最省事

适合已有表格结构不能改、又不想动单元格样式的情况。原理是靠父容器裁剪，而非真正在 table 上画圆角。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

HTML 结构保持原样，只加一层 wrapper：

<div class="table-wrapper">
  <table>...</table>
</div>

CSS：

.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd; /* 可选，模拟外边框 */
}
table {
  border-collapse: collapse; /* 原样式可保留 */
}