Question

我在获取一些我想要的样式表行为时遇到了一些问题。我甚至不确定它是否可能。基本上我试图在具有overflow: auto的DIV中放置一个具有可变数量单元格和静态单元宽度的表格，我的目标是当表格宽度超过容器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上设置内联宽度？

Answer 1

如果您在table上设置宽度，则可以使用。

<table style="width:1200px;">

td总会缩小到必要的大小，在这种情况下，他们不会把桌子推得更宽。

Answer 2

使用CSS可以像下面这样做，但如果你有多个表或div，请确保使用id或class来应用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收缩

2 个答案: