css - colspan 与固定宽度表混淆

Question

我想要一个固定宽度的表格，其中包含 1 个小列和 2 个大列，如下所示：

|..|....|....|
|..|....|....|
|..|....|....|

使用

td.small { width: 20% }
td.large { width: 40% }

---

然后我想像这样添加一个带有 colspan=2 的超大 col

|.......|....|
|..|....|....|
|..|....|....|

使用

td.small { width: 20% }
td.large { width: 40% }
td.extralarge { width: 60% } /* 20+40=60 */

---

但我一直在结束：

|.......|....|
|...|...|....|
|...|...|....|

---

在 jsbin 上可以找到更图形化的示例

**编辑**

抱歉，我错过了一个细节：我必须使用（或者我认为..？）table-layout: fixed，因为我有一些特殊的单元格溢出属性：

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

更新 jsbin 在这里找到。

Answer 1

您还可以使用colgroupandcol来设置宽度：

<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>

使用这个 CSS：

table { width: 100%; }
.short {
    background: lightblue;
    width: 20%
}
.long {
    background: lightgreen;
    width: 40%;
}
.multiCells { background: #F3A633; }

这样你就不需要给每个人td一个类，当你想更改类名时会更容易。

JSFiddle 演示

colgroup MDN 文章

Answer 2

更改表格布局：固定为自动

table {
  table-layout: auto;
}

在这里找到工作演示：http: //jsbin.com/atohug/2/edit

Answer 3

LinkinTED 提供了一个可行的解决方案，但该示例并未直接解决 OP 的问题或解释其工作原理。该示例应如下所示（借用相同的语法）

<table>
    <colgroup>
        <col class="short" />
        <col span="2" class="long" />
    </colgroup>
    <tr>
        <td colspan=2>Extra long content</td>
        <td>Long long long long</td>
    </tr>
    <tr>
        <td>Short</td>
        <td>Long long long long</td>
        <td>Long long long long</td>
    </tr>
</table>

OP 的问题是，当您使用 table-layout: fixed 时，表格期望每个单元格的宽度都在第一行中明确定义，这样它就不必调整列的大小，因为更多的内容被添加到后面的单元格中。但是，如果您在第一行中使用 colspan=2，则它不知道这两个单元格的宽度，因此它默认为它们组合宽度的 50%，并且该决定对于表格的其余部分是固定的。通过使用 colgroup 并指定每列的宽度，表格可以预先固定列宽，您可以在第一行自由使用 colspan=2 （或更多）。

一个警告。col width= 仅支持像素和 %。如果您需要使用其他宽度单位，请将 col 与上述样式相关联。

Answer 4

我知道这篇文章真的很旧，但也许我的解决方案会对某人有所帮助。您可以在顶部做假行并通过将每个单元格的高度设置为 0 来隐藏它。这将有助于固定表格布局计算所需的单元格大小。

<table>
<tr class="hidden-row">
    <td>Short</td>
    <td>Long long long long</td>
    <td>Long long long long</td>
</tr>
<tr>
    <td colspan=2>Extra long content</td>
    <td>Long long long long</td>
</tr>
<tr>
    <td>Short</td>
    <td>Long long long long</td>
    <td>Long long long long</td>
</tr>

tr.hidden-row td {
    height: 0;
}