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

Answer 1

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

请确保您拥有属性table-layout自动

table {
   table-layout:auto;
}

Answer 2

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

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

DEMO

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

使用colspan时，将单元格宽度调整为内容

3 个答案: