CSS colspan 弄乱了固定宽度的表格

colspan messes with fixed width table

提问by Cotten

I want a fixed-width table with 1 small and 2 large columns like so:

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

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

using

使用

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

---

---

Then I want to add an extra large col with colspan=2 like so

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

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

using

使用

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

---

---

But I keep ending up with:

但我一直在结束：

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

---

---

A more graphical example is found on jsbin

在 jsbin 上找到了一个更图形化的例子

** edit**

**编辑**

Sorry, I missed one detail: I must use (or so I think..?) table-layout: fixedsince I'm having some special overflowing properties of the cells:

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

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

Updated jsbin found here.

在这里找到了更新的 jsbin。

回答by LinkinTED

You could also use colgroupand colto set the width:

您还可以使用colgroup和col来设置宽度：

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

With this CSS:

使用这个 CSS：

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

This way you do not need to give every tda class, makes it easier when you want to change the classname.

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

JSFiddle demo

JSFiddle 演示

colgroup MDN Article

colgroup MDN 文章

回答by web2008

change the table-layout: fixed to auto

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

table {
  table-layout: auto;
}

Find the working demo here: http://jsbin.com/atohug/2/edit

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

回答by Daemon42

LinkinTED provided a workable solution, but the example doesn't directly address the OP's issue or explain why it works. The example should look like this (borrowing the same syntax)

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>

The OP's issue was that when you use table-layout: fixed the table expects every cell's width to be clearly defined in the first row so that it doesn't have to resize the columns as more content is added to subsequent cells in later rows. However, if you use colspan=2 in the first row, it has no idea how wide those two cells are, so it defaults to 50% of their combined width and that decision is fixed for the rest of the table. By using colgroup and specifying the widths for each column, the table can fix the column widths up front and you're free to use colspan=2 (or more) on the first row.

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

One caveat. col width= only supports pixels and %. If you need to use other units of width, associate col with a style as above.

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

回答by kathrine0

I know that this post is really old but maybe my solution will help someone. You can do the fake row on the top and hide it by setting each cell's height to 0. This will help the table-layout fixed calculate the desired cell sizes.

我知道这篇文章真的很旧，但也许我的解决方案会对某人有所帮助。您可以在顶部创建假行并通过将每个单元格的高度设置为 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;
}