<colgroup>:表格列组元素 <colgroup> HTML 元素定义了表格中的一组列。 尝试一下 </div></section><section aria-labelledby="属性"><h2 id="属性"><a href="#属性">属性</a></h2><div class="section-content"><p>此元素包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p> <p>指定 <code><col></code> 元素跨列的连续列数。该值必须是大于 0 的正整数。如果不存在,其默认值为 <code>1</code>。</p> <p><strong>备注:</strong> 如果 <code><colgroup></code> 中存在一个或多个 <a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a> 元素,则不允许使用 <code>span</code> 属性。</p> </dl></div></section><section aria-labelledby="弃用的属性"><h3 id="弃用的属性"><a href="#弃用的属性">弃用的属性</a></h3><div class="section-content"><p>以下属性已被弃用,不应再使用。下文记录了这些属性,供更新现有代码时参考,也仅供参考。</p> <dt id="align"><a href="#align"><code>align</code></a> <abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <p>指定每个列组单元格的水平对齐方式。可能的<a href="/zh-CN/docs/Glossary/Enumerated">枚举</a>值有 <code>left</code>、<code>center</code>、<code>right</code>、<code>justify</code> 和 <code>char</code>。如果支持,<code>char</code> 值将根据 <a href="#char"><code>char</code></a> 属性中定义的字符和 <a href="#charoff"><code>charoff</code></a> 属性定义的偏移量对文本内容进行对齐。请注意,后代 <a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a> 元素可以使用自己的 <a href="/zh-CN/docs/Web/HTML/Element/col#align"><code>align</code></a> 属性覆盖该值。使用 <a href="/zh-CN/docs/Web/CSS/text-align"><code>text-align</code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/th"><code><th></code></a> 元素上的 CSS 属性,因为该属性已被弃用。</p> <p><strong>备注:</strong> 在 <code><colgroup></code> 元素上设置 <code>text-align</code> 没有任何作用,因为 <a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/HTML/Element/td"><code><td></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/th"><code><th></code></a> 元素不是 <code><colgroup></code> 元素的后代,因此它们不能从该元素继承。</p> <p>如果表格没有使用 <a href="/en-US/docs/Web/HTML/Element/td" class="only-in-en-us" title="此页面目前仅提供英文版本"><code>colspan</code></a> 属性,则在每列使用 <code>td:nth-of-type(an+b)</code> CSS 选择器,其中 <code>a</code> 为表格中列的总数,<code>b</code> 为列在表格中的序号位置,例如 <code>td:nth-of-type(7n+2) { text-align: right; }</code> 可右对齐第二列单元格。</p> <p>如果表格使用了 <a href="/en-US/docs/Web/HTML/Element/td" class="only-in-en-us" title="此页面目前仅提供英文版本"><code>colspan</code></a> 属性,则可以通过组合适当的 CSS 属性选择器(如 <code>[colspan=n]</code>)来达到效果,不过这并非易事。</p> <dt id="bgcolor"><a href="#bgcolor"><code>bgcolor</code></a> <abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <p>定义每列单元格的背景颜色。该值是 HTML 颜色;可以是以“<code>#</code>”为前缀的 <a href="/zh-CN/docs/Web/CSS/hex-color">6 位十六进制 RGB 代码</a>,也可以是<a href="/zh-CN/docs/Web/CSS/named-color">颜色关键字</a>。不支持其他 CSS <a href="/zh-CN/docs/Web/CSS/color_value"><code><color></code></a> 值。请使用 <a href="/zh-CN/docs/Web/CSS/background-color"><code>background-color</code></a> CSS 属性代替,因为该属性已被弃用。</p> <p>没有任何作用。其最初目的是指定内容与每列单元格中的一个字符对齐。当试图对齐数字或货币值时,其典型值包括句号(<code>.</code>)。如果 <a href="#align"><code>align</code></a> 未设置为 <code>char</code>,该属性将被忽略,但它仍将作为默认值用于属于该列组的 <a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a> 元素的 <a href="/zh-CN/docs/Web/HTML/Element/col#align"><code>align</code></a>。</p> <dt id="charoff"><a href="#charoff"><code>charoff</code></a> <abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <p>没有任何作用。它最初用于指定列单元格内容从 <a href="#char"><code>char</code></a> 属性指定的对齐字符偏移的字符数。</p> <dt id="valign"><a href="#valign"><code>valign</code></a> <abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <p>指定每个列组单元格的垂直对齐方式。可能的<a href="/zh-CN/docs/Glossary/Enumerated">枚举</a>值有 <code>baseline</code>、<code>bottom</code>、<code>middle</code> 和 <code>top</code>。请注意,后代 <a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a> 元素可以使用自己的 <a href="/zh-CN/docs/Web/HTML/Element/col#valign"><code>valign</code></a> 属性覆盖此值。使用 <a href="/zh-CN/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/th"><code><th></code></a> 元素上的 CSS 属性,因为该属性已被弃用。</p> <p><strong>备注:</strong> 在 <code><colgroup></code> 元素上设置 <code>vertical-align</code> 没有任何作用,因为 <a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/HTML/Element/td"><code><td></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/th"><code><th></code></a> 元素不是 <code><colgroup></code> 元素的后代,因此它们不能从该元素继承。</p> <p>如果表格没有使用 <a href="/en-US/docs/Web/HTML/Element/td" class="only-in-en-us" title="此页面目前仅提供英文版本"><code>colspan</code></a> 属性,请在每列使用 <a href="/zh-CN/docs/Web/CSS/:nth-of-type"><code>td:nth-of-type()</code></a> CSS 选择器,例如,<code>td:nth-of-type(2) { vertical-align: middle; }</code> 使第二列单元格垂直居中。</p> <p>如果表格使用了 <a href="/en-US/docs/Web/HTML/Element/td" class="only-in-en-us" title="此页面目前仅提供英文版本"><code>colspan</code></a> 属性,则可以通过组合适当的 CSS 属性选择器(如 <code>[colspan=n]</code>)来达到效果,不过这并非易事。</p> <dt id="width"><a href="#width"><code>width</code></a> <abbr class="icon icon-deprecated" title="已弃用。请不要在新的网站中使用。"> <p>该属性为当前列组中的每一列指定默认宽度。除标准像素值和百分比值外,该属性还可以使用特殊形式 <code>0*</code>,这意味着组中每一列的宽度应为容纳该列内容所需的最小宽度。也可以使用相对宽度,如 <code>0.5*</code>。请注意,后代 <a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a> 元素可以使用自己的 <a href="/zh-CN/docs/Web/HTML/Element/col#width"><code>width</code></a> 属性覆盖此值。请使用 <a href="/zh-CN/docs/Web/CSS/width"><code>width</code></a> CSS 属性代替,因为该属性已被弃用。</p> <li><code><colgroup></code> 应出现在 <a href="/zh-CN/docs/Web/HTML/Element/table"><code><table></code></a> 内,任何 <a href="/zh-CN/docs/Web/HTML/Element/caption"><code><caption></code></a> 元素(如果使用)之后,但在任何 <a href="/zh-CN/docs/Web/HTML/Element/thead"><code><thead></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/tbody"><code><tbody></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/tr"><code><tr></code></a> 元素之前。</li> <li>只有数量有限的 CSS 属性会影响 <code><colgroup></code>: <li><a href="/zh-CN/docs/Web/CSS/background"><code>background</code></a>:各种 <code>background</code> 属性将为列组中的单元格设置背景。由于列组的背景色绘制在表格顶部,而背景色绘制在列(<a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a>)和行组(<a href="/zh-CN/docs/Web/HTML/Element/thead"><code><thead></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/tbody"><code><tbody></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a>)上。只有在表格列组上绘制的每个图层都具有透明背景时,应用于表格列组的背景才会可见。</li> <li><a href="/zh-CN/docs/Web/CSS/border"><code>border</code></a>:适用各种 <code>border</code> 属性,但前提是 <code><table></code> 已设置 <a href="/zh-CN/docs/Web/CSS/border-collapse"><code>border-collapse: collapse</code></a>。</li> <li><a href="/zh-CN/docs/Web/CSS/visibility"><code>visibility</code></a>:如果为列组设置 <code>collapse</code> 值,则该列组中列的所有单元格都不会被渲染,而跨入其他列的单元格则会被剪切。列组中的这些列原本占据的空间会被移除。但是,其他列的大小仍然按照列组中被折叠列的单元格计算。<code>visibility</code> 的其他值没有影响。</li> <li><a href="/zh-CN/docs/Web/CSS/width"><code>width</code></a>:<code>width</code> 属性定义了列组中的列的最小宽度,如同设置了 <a href="/zh-CN/docs/Web/CSS/min-width"><code>min-width</code></a>。</li> </ul></div></section><section aria-labelledby="示例"><h2 id="示例"><a href="#示例">示例</a></h2><div class="section-content"><p>请参阅 <a href="/zh-CN/docs/Web/HTML/Element/table"><code><table></code></a> 获取介绍通用标准和最佳实践的完整表格示例。</p> <p>本示例演示了一个七列表格,分为两个跨多列的 <code><colgroup></code> 元素。</p></div></section><section aria-labelledby="html"><h3 id="html"><a href="#html">HTML</a></h3><div class="section-content"><p>两个 <code><colgroup></code> 元素用于通过创建列组来构建基本表格。每个列组中的列数由 <a href="#span"><code>span</code></a> 属性指定。</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate" data-signature="NCZrCXWoBMmocR1CLL/FMH14ImZoCAqJ9PxntLOayE8="><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>caption</span><span class="token punctuation">></span></span> 个人每周活动 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>caption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>colgroup</span> <span class="token attr-name">span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>weekdays<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>colgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>colgroup</span> <span class="token attr-name">span</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>weekend<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>colgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>周一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>周二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>周三<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>周四<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>周五<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>周六<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>周日<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>打扫房间<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>足球训练<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>舞蹈课<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>历史课<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>买饮料<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>自习<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>自由时间<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>瑜伽<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>棋类俱乐部<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>见朋友<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>体操<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>生日派对<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>钓鱼之旅<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>自由时间<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre></div></div></section><section aria-labelledby="css"><h3 id="css"><a href="#css">CSS</a></h3><div class="section-content"><p>分组列可用于使用 CSS 直观地突出显示结构:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate" data-signature="oAyhbsY62A5Gpxkjub7KDKdymVB2GN0oTsIFqVbi4+4="><code><span class="token selector">table</span> <span class="token punctuation">{</span> <span class="token property">border-collapse</span><span class="token punctuation">:</span> collapse<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 2px solid <span class="token function">rgb</span><span class="token punctuation">(</span>140 140 140<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token selector">caption</span> <span class="token punctuation">{</span> <span class="token property">caption-side</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> td</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid <span class="token function">rgb</span><span class="token punctuation">(</span>160 160 160<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 8px 6px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token selector">.weekdays</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #d7d9f2<span class="token punctuation">;</span> <span class="token selector">.weekend</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ffe8d4<span class="token punctuation">;</span> <div class="code-example"><pre class="brush: css hidden notranslate" data-signature="taLPUGbmdy5FygPExuEGttnDQCqPm2G/lfpjc0njLZU="><code><span class="token selector">table</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 0.8rem<span class="token punctuation">;</span> <span class="token property">letter-spacing</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <h4 id="结果">结果</h4><div class="code-example" id="sect4"><div class="example-header" id="sect5"/><iframe class="sample-code-frame" title="示例 sample" id="frame_示例" width="650" height="170" src="https://live.mdnplay.dev/zh-CN/docs/Web/HTML/Element/colgroup/runner.html?id=%E7%A4%BA%E4%BE%8B" loading="lazy"/></div></div></section><section aria-labelledby="技术概要"><h2 id="技术概要"><a href="#技术概要">技术概要</a></h2><div class="section-content"><figure class="table-container"><table class="properties"> <th scope="row">允许的内容</th> <td>如果存在 <a href="#span"><code>span</code></a> 元素:无。<br/>如果不存在属性:零个或多个 <a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a> 元素。</td> <td>如果 <a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a> 元素的第一个子元素是 <a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a>,并且其前面没有省略结束标签的 <a href="/zh-CN/docs/Web/HTML/Element/colgroup" aria-current="page"><code><colgroup></code></a>,则可以省略开始标签。<br/>如果结束标签后面没有空格或注释,则可以省略结束标签。</td> <th scope="row">允许的父元素</th> <td><a href="/zh-CN/docs/Web/HTML/Element/table"><code><table></code></a> 元素。<a href="/zh-CN/docs/Web/HTML/Element/colgroup" aria-current="page"><code><colgroup></code></a> 必须出现在任何 <a href="/zh-CN/docs/Web/HTML/Element/caption"><code><caption></code></a> 元素之后,而在任何 <a href="/zh-CN/docs/Web/HTML/Element/thead"><code><thead></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/tbody"><code><tbody></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a> 和 <a href="/zh-CN/docs/Web/HTML/Element/tr"><code><tr></code></a> 元素之前。</td> <th scope="row">隐式 ARIA 角色</th> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" class="external" target="_blank">没有对应的角色</a></td> <th scope="row">允许的 ARIA 角色</th> <td>没有允许的 <code>role</code></td> <th scope="row">DOM 接口</th> <td><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></td> </table></figure></div></section><h2 id="规范"><a href="#规范">规范</a></h2><table class="standard-table"><thead><tr><th scope="col">Specification</th></tr></thead><tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/tables.html#the-colgroup-element">HTML Standard<!-- --> <br/><small># <!-- -->the-colgroup-element</small></a></td></tr></tbody></table><h2 id="浏览器兼容性"><a href="#浏览器兼容性">浏览器兼容性</a></h2><p>BCD tables only load in the browser</p><noscript> <!-- -->with JavaScript enabled. Enable JavaScript to view data.</noscript><section aria-labelledby="参见"><h2 id="参见"><a href="#参见">参见</a></h2><div class="section-content"><ul> <li><a href="/zh-CN/docs/Learn/HTML/Tables">学习区:HTML 表格</a></li> <li><a href="/zh-CN/docs/Web/HTML/Element/caption"><code><caption></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/col"><code><col></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/table"><code><table></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/tbody"><code><tbody></code></a>、<a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/HTML/Element/td"><code><td></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/th"><code><th></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/thead"><code><thead></code></a>、<a href="/zh-CN/docs/Web/HTML/Element/tr"><code><tr></code></a>:其他与表格相关的元素。</li> <li><a href="/zh-CN/docs/Web/CSS/background-color"><code>background-color</code></a>:用于设置每个列组单元格背景颜色的 CSS 属性</li> <li><a href="/zh-CN/docs/Web/CSS/border"><code>border</code></a>:用于控制列组单元格边框的 CSS 属性</li>