Html 防止表溢出：自动div收缩

我在获取我想要的一些样式表行为时遇到了一些问题。我甚至不确定这是否可能。基本上，我试图将一个表放置在一个具有静态单元格宽度的可变单元格数的DIV中，并使用

overflow:auto

，我的目标是，当表的宽度超过容器DIV的宽度时，它变得可滚动

事实并非如此。细胞收缩在一起。代码的一个非常基本的表示形式（带有内联样式，便于理解；实际上不在应用程序中，哈哈）：

<div style="width: 1000px; overflow-x: auto;">
    <table>
        <tr>
            <td style="width:400px;">
                This
            </td>
            <td style="width:400px;">
                Should
            </td>
            <td style="width:400px;">
                Scroll!
            </td>
        </tr>
    </table>
</div>

这
应该
纸卷

---

不管怎样，我是否可以用CSS来实现这一点，或者我是否必须通过计算返回到包含表格的第二个div上设置内联宽度？

如果您在

表格

本身上设置宽度，则该方法有效

---

td

将始终缩小到所需的大小，在这种情况下，它们不会将表推得更宽。

使用CSS可以像下面这样做，但如果您有多个表或div，请确保使用id或类来应用CSS

<style>
    div { width: 400px; overflow-x: auto; }
    table { width:1200px; }
    table td { width:400px; }
</style>


<div>
    <table>
        <tr>
            <td>
                This
            </td>
            <td>
                Should
            </td>
            <td>
                Scroll!
            </td>
        </tr>
    </table>
</div>

div{width:400px；溢出-x:auto；}
表{宽度：1200px；}
表td{width:400px；}
这
应该
纸卷

是的，我知道。我在我的帖子里写的；）我只是在寻找一种更优雅的方式通过CSS来处理它。