Question

我想创建一个包含包装器的表，如果表超出宽度则滚动。它没有给父母宽度，但工作正常。

我试着让课程仍然结果相同。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
    <div class="table-wrap">
        <table>
            <colgroup>
                <col style="width: 350px"></col>
                <col style="width: 350px"></col>
                <col style="width: 350px"></col>
                <col style="width: 350px"></col>
                <col style="width: 350px"></col>
            </colgroup>
            <thead>
                <tr>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                    <th>header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>one</td>
                    <td>one</td>
                    <td>one</td>
                    <td>one</td>
                    <td>one</td>
                </tr>
                <tr>
                    <td>one two</td>
                    <td>one two</td>
                    <td>one two</td>
                    <td>one two</td>
                    <td>one two</td>
                </tr>
                <tr>
                    <td>threeeee</td>
                    <td>threeeee</td>
                    <td>threeeee</td>
                    <td>threeeee</td>
                    <td>threeeee</td>
                </tr>
                <tr>
                    <td>cell one two</td>
                    <td>cell one two</td>
                    <td>cell one two</td>
                    <td>cell one two</td>
                    <td>cell one two</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

小提琴参考（http://jsfiddle.net/8xznsvyt/）

Answer 1

似乎你想要一个包含5列的表，所有列都是350px，包装在一个宽度设置在其上的容器中。如果容器比表格所需的更窄，您可能希望表格水平滚动。

小提琴中发生的事情是桌子和容器一样宽。这是CSS table formatting规则的结果。因此，无法满足列宽设置。浏览器应用动态列分配，根据内容要求划分列之间的可用宽度（在小提琴中，均匀，因为内容相同）。

最简单的解决方法是明确地在表格上设置宽度：

col {
  width: 350px;
}
table {
  width: 1756px; /* 5 × 350 + 6, for columns and borders */
  border-collapse: collapse;
  white-space: nowrap;
}
table td, table th {
  border: 1px solid #000;
}
.table-wrap {
  width: 500px;
  overflow: auto;
}

<div class="table-wrap">
    <table>
      <col><col><col><col><col>
        <thead>
            <tr>
                <th>header</th>
                <th>header</th>
                <th>header</th>
                <th>header</th>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>one</td>
                <td>one</td>
                <td>one</td>
                <td>one</td>
                <td>one</td>
            </tr>
            <tr>
                <td>one two</td>
                <td>one two</td>
                <td>one two</td>
                <td>one two</td>
                <td>one two</td>
            </tr>
            <tr>
                <td>threeeee</td>
                <td>threeeee</td>
                <td>threeeee</td>
                <td>threeeee</td>
                <td>threeeee</td>
            </tr>
            <tr>
                <td>cell one two</td>
                <td>cell one two</td>
                <td>cell one two</td>
                <td>cell one two</td>
                <td>cell one two</td>
            </tr>
        </tbody>
    </table>
</div>

我在某种程度上简化了HTML和CSS代码。不需要colspan元素;它既不是问题的一部分，也不是解决方案的一部分。列宽最好在CSS中设置

如果父级给定宽度，则colgroup不工作

1 个答案: