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 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" />

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

1 个答案: