HTML代码中给表格指定列设置样式的colgroup应用-html教程-PHP中文网

colgroup不能直接写多数样式，因其不渲染为可视元素；仅width、background、border（需collapse）、visibility（collapse）有效，其余样式须作用于td/th或用:nth-child()选择器。

html代码中给表格指定列设置样式的colgroup应用

colgroup 为什么不能直接写样式？

因为 <colgroup></colgroup> 本身不渲染为可视元素，它只是语义上的列容器，浏览器不会把它当作可样式化的真实 DOM 节点。你给 <colgroup></colgroup> 或里面的 <col> 直接加 color、font-size 这类属性是无效的——这些样式根本不会继承到单元格上。

真正能生效的只有少数几个 CSS 属性：width、background、border（仅当 border-collapse: collapse 且 <col> 设了 border）、visibility（collapse 有效，hidden 无效）。其他样式必须作用在 <td> 或 <code><th> 上。 <ul> <li>想控制某列宽度？用 <code><col width="120"> 或 CSS 的 width 设在 <col> 上

想让第 3 列背景变灰？<col> 上设 background: #f0f0f0，再配合 border-collapse: collapse

想让第 2 列文字右对齐？不能靠 <col>，得给该列所有 <td>/<code><th> 加 <code>text-align: right

colgroup + col 的嵌套结构容易写错

<colgroup></colgroup> 必须紧贴在 <table> 开始标签之后、<code><thead> 之前；<code><col> 只能是它的直接子元素，不能套 <div> 或其他标签。常见错误是把 <code><col> 放到 <tbody> 里，或者用 <code>span 属性时数错列数。

<col span="2"> 表示“接下来连续 2 列”，不是“第 2 列”
如果用了 <colgroup span="3"></colgroup>（错误写法），浏览器会忽略整个 <colgroup></colgroup>
多个 <colgroup></colgroup> 可以共存，但每个 <colgroup></colgroup> 的列数之和必须等于表格总列数，否则后续列样式会错位
建议显式写出每列的 <col>，比如 4 列就写 4 个 <col>，避免 span 计算出错

用 CSS 选择器精准控制某列更可靠

当需要设置文字颜色、padding、vertical-align 等 <col> 不支持的样式时，CSS 伪类 :nth-child() 是更通用的选择。它直接匹配单元格，不受 <colgroup></colgroup> 限制。

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

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

下载

table td:nth-child(3), table th:nth-child(3) {
  background: #e8f4ff;
  text-align: center;
}

td:nth-child(3) 匹配每行第 3 个 <td>，不管它是否跨行（<code>rowspan 不影响）
如果表头有合并单元格（colspan），:nth-child() 仍按物理列位置计算，不是逻辑列
IE8 不支持 :nth-child()，需用 JS 或额外 class 标记列
性能上没问题，现代浏览器对这类选择器优化很好

colgroup 在响应式或动态表格中容易失效

用 JS 动态插入行时，<colgroup></colgroup> 不会自动扩展；用 CSS Grid 或 Flex 替代表格布局时，<colgroup></colgroup> 完全不生效。它只对传统 HTML 表格结构起作用。

Vue/React 中通过 v-for 或 .map() 渲染表格时，确保 <colgroup></colgroup> 和列数严格对应，别漏掉空列
用 display: table 模拟表格的 div 布局，<colgroup></colgroup> 无效，只能靠 grid 或 width 百分比
打印样式里 <col> 的 width 有时被忽略，建议同时在 td 上设 min-width

真正要靠 <colgroup></colgroup> 解决的，其实只剩列宽控制和极简背景/边框——其余样式，老老实实交给单元格自己管。