使表格单元格的内容大于单元格而不改变单元格的宽度答案

【问题标题】：Make content of a table cell bigger than the cell without changing the cell's width使表格单元格的内容大于单元格而不改变单元格的宽度
【发布时间】：2015-08-05 13:15:24
【问题描述】：

由于标题可能令人困惑，我将使用一些图片来解释我的意思。

这是我的情况：

所有这些都在一张桌子里面，所有的盒子都占据了桌子的宽度。但是我需要实现的是数据字段在一定条件下增长到屏幕的全宽，因为内容可以非常多。这应该是这样的：

当然，由于整个东西都在一个表格中，改变数据字段的宽度也会改变表格单元格的宽度，因此也会改变其他单元格的宽度，这会导致文本框和列表框增长为好：

那么有什么方法可以让单元格保持固定大小，同时让数据字段在单元格/表格的边界上增长？我想过使用定位或其他东西，但它并没有真正奏效。而且我无法更改表格布局，因为这不是我的工作，我只是在“清理”它。

【问题讨论】：

你为什么用桌子？如果您采用不同的方法，您将对各个元素有更多的控制权！
我也讨厌使用表格，但正如我已经写过的，我不允许更改它。太可怕了。
如果不这样做，我不相信有任何简单的解决方案可以解决您的问题..
您可以使用 no of 列，然后相应地使用 colspan 来阻止其他字段扩展。

标签： html css

【解决方案1】：

如何为 td 应用 max-width 以使它们不会扩展？

table {
    border-spacing: 0px;
    border-collapse: collapse;
}
table td {
    max-width: 100px; /* applied max-widht here */
    border: 1px solid red;
}
table input {
    width: 100%;
    box-sizing: border-box;
}
#dd {
    width: 300px;
}

<table>
    <tr>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <select id="dd">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </td>
    </tr>
</table>

【讨论】：

谢谢，我知道必须有一个简单的解决方案！我总是想得太复杂了。