HTML表格如何结合CSS设置样式-html教程-PHP中文网

border-collapse: collapse必须作用于table元素才能生效，因默认边框为separate模式导致相邻单元格边框分离呈双线；该属性与border-spacing互斥，且仅当td/th设有显式边框时合并效果才可见。

html表格如何结合css设置样式

直接用 table、th、td 选择器配关键 CSS 属性就能生效，不需要额外 wrapper 或 JS；但边框合并、列宽控制、响应式断点这几个地方最容易出错。

为什么 `border-collapse: collapse` 必须加

默认表格边框是“分离”的，每个 td 和 th 都自带间距，看起来像双线。不加 border-collapse: collapse，哪怕写了 border: 1px solid #000，也会出现冗余空隙和重复边框。

border-collapse: collapse 让相邻单元格边框合为一条线，这是干净表格的起点
它必须写在 table 选择器上，写在 td 上无效
如果用了 border-spacing（仅对 separate 模式有效），会覆盖 collapse，导致失效

`table-layout: fixed` 控制列宽的实际效果

默认 table-layout: auto 会让浏览器根据内容撑开列宽，一列塞长文本，整列就变宽，其他列被压缩——这在数据表格里极难预测。

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

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

下载

table-layout: fixed 后，列宽由第一行 th 或 col 元素的 width 决定，后续内容再长也不会撑开
配合 th:first-child { width: 120px } 或 <col style="width: 150px"> 才真正生效
注意：若第一行没有足够 th，或用了 colspan，宽度计算会失准

给最后一行加样式时，`tr:last-of-type` 比 `tr:last-child` 更稳

表格里常有 <thead>、<code><tbody>、<code><tfoot> 结构，<code>tr:last-child 可能选中 <tfoot> 里的 <code>tr，而不是你想要的数据末行。

用 tbody tr:last-of-type 能精准命中 <tbody> 中最后一个 <code>tr，不受 <tfoot> 干扰 <li>如果没写 <code><tbody>，浏览器会自动补全，但显式写出更可控 <li>避免用 <code>:nth-last-child(1)，语义不清且兼容性略差