使用colspan时使单元格宽度适合内容

Question

我正在尝试使表格中的第一个或第一个td匹配内容的宽度，而不要拉伸。 在我介绍colspan之前，一切正常。 有人知道如何解决这个问题吗？

HTML：

<table>
<tr>
    <td>this should not stretch</td>
    <td>this should stretch</td>
</tr>
<tr>
    <td colspan="2">
        This is a lot of text ............................................................................ ..............................................
    </td>
</tr>
</table>

CSS：

td{
    border:1px solid #000;
}

tr td:first-child{
    width:1%;
    white-space:nowrap;
}

jsfiddle

Answer 1

在jsfiddle上，您提供给我们的代码正在运行。

确保将属性table-layout为自动

table {
   table-layout:auto;
}

Answer 2

将剩余宽度应用于最后一个元素，如下所示。

 tr td:last-child
 {
    width:99%;
 }

演示

Answer 3

也许有点非常规，但要使所有细胞自由流动，我会使用更多的colspans

例：

https://jsfiddle.net/link2twenty/wexdX/1171/

HTML：

<table>
    <tr>
        <td class="tight" colspan="1">this should not stretch</td>
        <td colspan="2">this should stretch</td>
    </tr>
    <tr>
        <td colspan="2">this should stretch</td>
        <td class="tight" colspan="1">this should not stretch</td>
    </tr>
    <tr>
    <td colspan="3">
        This is a lot of text ............................................................................ ..............................................
    </td>
</tr>
</table>

CSS：

td{
    border:1px solid #000;
    table-layout: fixed;
}

.tight {
    width:1%;
    white-space:nowrap;
}