html - 在不改变单元格宽度的情况下，使表格单元格的内容大于单元格

Question

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

我的情况是这样的:

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

当然，由于所有内容都在表格中，因此更改数据字段的宽度也会更改表格单元格的宽度，因此也会更改其他单元格的宽度，这会导致文本框和列表框增长为出色地:

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

Answer 1

如何为 tds 应用 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>