HTML表格中如何设置表格顶部的圆角效果（样式美化）-html教程-PHP中文网

table直接加border-radius顶部不圆，因为border-collapse: collapse使边框合并，且实际边框由th/td渲染而非table本身；需设border-collapse: separate并给首行th加border-top-left/right-radius，或用外层div+overflow:hidden裁剪。

html表格中如何设置表格顶部的圆角效果（样式美化）

table直接加`border-radius`为什么顶部不圆？

因为浏览器默认给table应用border-collapse: collapse，此时边框是“合并”状态，border-radius失去作用对象——它没地方可圆。更关键的是，真正渲染边框的是th和td，不是table本身。所以哪怕你写了table { border-radius: 10px; }，顶部两个角依然直挺挺的。

用`border-collapse: separate` + 精准控制表头圆角

这是最可控、兼容性好、不依赖额外DOM的方式。核心是把边框“还给单元格”，再手动给首行首尾th加圆角：

table设border-collapse: separate和border-spacing: 0，保持视觉紧凑
th:first-child加border-top-left-radius
th:last-child加border-top-right-radius
确保th有显式border（比如1px solid #ccc），否则圆角无从体现

示例片段：

table {
  border-collapse: separate;
  border-spacing: 0;
}
th {
  border: 1px solid #ddd;
}
th:first-child {
  border-top-left-radius: 8px;
}
th:last-child {
  border-top-right-radius: 8px;
}

用外层`div`包裹并裁剪溢出

适合不想动表格内部结构、或需快速上线的场景。但要注意：这不是真圆角，而是“遮掉直角”的障眼法。

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

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

下载