包含长字符串的列的 CSS 表格对齐问题答案

【问题标题】：CSS table alignment issues with columns containing long strings包含长字符串的列的 CSS 表格对齐问题
【发布时间】：2012-10-19 05:21:57
【问题描述】：

我有一个问题：我的表格在没有“分隔符”行的情况下完美显示。此行服务器将我的表的两个部分分开。此行中的列 (colspan=2) 包含一个长字符串，描述它下面的表格部分。不幸的是，这个长字符串的存在会导致表格的其余部分错位。如何让表格在调整表格大小时有效地忽略此列，或者如何解决此问题？

【问题讨论】：

标签： css

【解决方案1】：

使用colgroup 和col 标签（以这种方式设置列宽）。然后将table-layout: fixed; 添加到表格的 CSS 中：

<table>
    <colgroup>
        <col style="width:25%" />
        <col style="width:25%" />
        <col style="width:25%" />
        <col style="width:25%" />
    </colgroup>
    <thead>
        <!-- thead stuff here -->
    </thead>
    <tbody>
        <!-- tbody stuff here -->
    </tbody>
</table>

table { table-layout: fixed; }

【讨论】：

谢谢凯文。如果您想添加关于为什么这会解决问题的评论，这将是有帮助的。特别是为什么设置 table-layout:fixed 以及 col 宽度会使其工作。
table { table-layout: fixed; } 有效地禁用了浏览器的表格布局算法，允许您（成功地）指定列宽。使用colgroup 标记和子col 标记使指定宽度更容易且更易于维护。
谢谢，非常感谢您的解释。