使表格单元格的内容大于单元格，而不更改单元格的宽度

Question

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

以下是我的情况：

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

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

那么有没有办法让单元格保持固定的大小，同时使数据字段在单元格/表格的边界上增长？我考虑使用定位或其他东西，但它并没有真正解决。而且我不能改变桌面布局，因为这不是我的工作而且我只是“清理它”。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;