Question

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

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

使用

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

然后我想添加一个额外的大col与colspan = 2，如此

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

使用

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

但我最终还是坚持：

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

更具图形化的示例is found on jsbin

js-bin screenshot

** 修改 **

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

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

Updated jsbin found here

Answer 1

您还可以使用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>

使用这个CSS：

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

这样您就不需要为每个td提供一个类，当您想要更改类名时更容易。

<强> JSFiddle demo

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时：修复了该表期望在第一行中明确定义每个单元格的宽度，以便当更多内容添加到后续单元格中时不必调整列的大小。后排。但是，如果在第一行中使用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;
}

colspan messes与固定宽度表

4 个答案: