html - 使用相同的列组时，多个 HTML 表格具有不同的列宽

Question

我在使用以下布局的页面上有多个 HTML 表格:

H2 Header
Table
H2 Header
Table
H2 Header
Table

所有表格的宽度都应为 100%，其中 3 列的宽度分别为 50%、30% 和 20%。我为每个表格使用了相同的 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>

Answer 1

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

尝试使用表的 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" />