colspan messes与固定宽度表

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

---

但我一直坚持:

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

---

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

**编辑**

对不起,我错过了一个细节:我必须使用(或者我认为......？),table-layout: fixed因为我有一些特殊的溢出属性:

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

更新了jsbin在这里找到.

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

Answer 2

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

table {
  table-layout: auto;
}

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

Answer 3

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

Answer 4

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 与上述样式相关联。