使用相同的 colgroup 时，多个 HTML 表具有不同的列宽答案

【问题标题】：Multiple HTML tables have different column widths when using identical colgroups使用相同的 colgroup 时，多个 HTML 表具有不同的列宽
【发布时间】：2014-10-17 08:05:18
【问题描述】：

我在一个页面上有几个使用以下布局的 HTML 表格：

H2 Header
Table
H2 Header
Table
H2 Header
Table

所有表格的宽度应为 100%，包含 50%、30% 和 20% 宽度的 3 列。我为每个表使用了相同的 CSS 来定义列宽。我正在通过 NuGet 使用 Twitter Bootstrap 3.0.0； table 和 table-hover 类是 Bootstrap 类。

当页面加载时，每个表格都有不同的页面宽度。尽管在 bootstrap.css 中有一个 CSS 样式声明 .table { width: 100% }。它似乎使用列的内容来设置表格宽度而不是 CSS 样式。

我是否遗漏了一些明显的东西或做错了什么？我是否需要将表格显式设置为 100%？

CSS

.columnA {
    width: 50%;
}

.columnB {
    width: 30%;
}

.columnC {
    width: 20%;
}

HTML

<!-- Duplicated several times -->
<h2>Header</h2>
<table class="table table-hover">
    <colgroup>
        <col class="columnA" />
        <col class="columnB" />
        <col class="columnC" />
    </colgroup>

    <thead>
        <tr>
            <th>Title</th>
            <th>Address</th>
            <th>Description</th>
        <tr>
        <!-- More rows -->
    </thead>
    <tbody>
        <tr>
            <td>Site Title</td>
            <td>http://web-address.url</td>
            <td>A description of the site</td>
        <tr>
    </tbody>
</table>

【问题讨论】：

为什么你需要 table 元素上的 table 和 table-hover 类？使用table { /* styles */ } 和table:hover { /* styles */ } 让您头疼。
您发布的代码不会重现您所描述的问题。我已将其粘贴在此处的演示中：jsbin.com/zubova/3/edit 请对其进行修改，并在问题可见时将链接返回给我们。
我已经更新了这个问题，以便更清楚地了解我面临的问题。 @Zaqx - 我很欣赏我可以手动编写样式，但看到 Bootstrap 为我做了这件事，我宁愿使用它们。感谢您的示例，但它没有设置表格宽度（Bootstrap 所做的），并且没有内容它们将是相同的宽度。

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 会修改表格以适应所有单元格内容，这就是您的表格看起来不同的原因。

尝试使用表格引导文档中定义的网格布局

Bootstrap Grid Layout

例如，

而不是使用这个宽度

<col class="columnA" />
<col class="columnB" />
<col class="columnC" />

你可以使用

<col class="col-md-6" />
<col class="col-md-4" />
<col class="col-md-2" />

【讨论】：

非常感谢，但这对于我需要的东西来说太过分了——只是一个表格数据的表格，而不是一个网格。 :)