HTML表格怎么通过CSS样式美化表格（代码解析）-html教程-PHP中文网

必须设置 border-collapse: collapse 以消除双线缝隙，且需配合 th/td 的 border 定义；padding 应分层设置，th 和 td 值不同以维持行高节奏；隔行变色须用 tbody tr:nth-child(even)；sticky 表头需同时设 z-index 和 background-clip。

html表格怎么通过css样式美化表格（代码解析）

border-collapse: collapse 必须设，否则边框双线糊成一片

浏览器默认给 table、th、td 各自渲染边框，再叠上 border-spacing（默认 2px），结果就是“双线+缝隙”，尤其在深色背景或高缩放下特别刺眼。不加这句，后面所有 padding 和颜色都白调。

必须写：

table { border-collapse: collapse; }

，且不能只写在 table 上——它只是开关，真正起作用的是后续对 th 和 td 的 border 定义。

别用 border-collapse: separate，除非你明确要留缝；真要用，必须同步设 border-spacing: 0，否则移动端容易横向溢出
border-collapse: collapse 对 colspan/rowspan 单元格完全兼容，无需额外 hack
IE8+ 全支持，不用 polyfill

padding 要分层设，th 和 td 不能用同一值

统一写 padding: 12px 看似省事，实则破坏行高节奏：表头需要更强的视觉锚点，数据行需兼顾数字对齐和文本换行，硬套会撑高 tr，导致斑马纹错位、悬停阴影发虚。

推荐组合：

th { padding: 10px 16px; }<br>td { padding: 8px 14px; }

左右 padding 稍宽（如 14–16px）能避免文字贴边，尤其当单元格含图标或复选框时，可单独加大 padding-left: 20px
上下 padding 控制在 8–10px，超过 12px 容易让行高失衡，滚动时 sticky 表头会“跳帧”
如果某列全是数字，可对 td:nth-child(3) 单独设 text-align: right + padding-right: 18px 强化右对齐呼吸感

tbody tr:nth-child(even) 才是隔行变色的正确写法

写 tr:nth-child(even) 看似直觉，但 thead 里的 tr 也被计入序号，结果第一行数据就变色——因为它是整个 table 的第 2 个 tr。

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

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

下载

必须限定作用域：

tbody tr:nth-child(even) { background-color: #f9f9f9; }

:nth-child 按 DOM 顺序计数，:nth-of-type 在动态插入行时可能漏掉某些 tr（比如插入了 comment 节点）
颜色别用纯灰，#f9f9f9 比 #f0f0f0 在 OLED 屏上更柔和，不反光
如果表格有 tfoot，也要单独处理，否则页脚行可能被误染色

thead th sticky 固定时 z-index 和 background-clip 缺一不可

加了 position: sticky; top: 0 却发现滚动时边框断开、背景被遮、文字模糊？大概率是没配齐两个关键属性。

完整写法：

thead th {<br>  position: sticky;<br>  top: 0;<br>  z-index: 2;<br>  background-clip: padding-box;<br>  background-color: rgba(255, 255, 255, 0.9);<br>  backdrop-filter: blur(2px);<br>}

z-index: 2 是底线，设为 1 可能被父容器的 overflow: hidden 截断
background-clip: padding-box 防止半透背景色溢出到边框区域，让 border 始终清晰
没加 backdrop-filter 的 rgba() 背景，滚动时边缘会“渗色”，尤其在 macOS Safari 下明显

最常被忽略的点：表格结构本身是否合规。比如 th 写在 tbody 里、tr 缺少 td、或者用 div 模拟表格却指望 nth-child 正常工作——这些都会让上述所有 CSS 失效或行为异常。样式是表层，结构才是地基。