使用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;
}