Html 表'；s溢出-x内部字段集

以下是两个示例：

<div class="content-wrapper">
    <div class="gridwrapper">
        <table>
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

当表的父div在另一个div中时，Overflow-x正常工作

<div class="content-wrapper">
    <fieldset>
        <legend></legend>
        <div class="gridwrapper">
            <table>
                <thead>
                    <tr>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>     
                    </tr>
                </tbody>
            </table>
        </div>
    </fieldset>
</div>

当表的父div位于字段集中时，Overflow-x无法正常工作，它允许扩展表的宽度

原因是什么？有人知道怎么修吗

我需要100%的字段集和gridwrapper宽度，大小必须仅基于主内容包装

---

谢谢

您还需要在字段集上设置最小和最大宽度，因此这应该可以完成以下工作：

.gridwrapper {
    border: 1px solid black;
    overflow-x: auto;
}
.content-wrapper, fieldset {
    min-width: 200px;
    max-width: 400px;
    margin: 0 auto;
}
table {
    width: 100%;
}

根据澄清，以下是另一种尝试：

.content-wrapper {
min-width: 200px;
max-width: 400px;
margin: 0 auto;
overflow-x: scroll;
}
.gridwrapper {
border: 1px solid #000;
overflow-x: auto;
max-width: 350px;
}
table {
    width: 100%;
}

解决方案

.gridwrapper {
    border: 1px solid black;
    overflow-x: auto;
    max-width: 350px;
}
.content-wrapper {
    min-width: 200px;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid red;
}
table {
    max-width: 350px;
}

---

这里有一种方法。将

display:inline block

应用于

fieldset

和

.gridwrapper

，并将

display:table

应用于

.content wrapper

。这将强制内容 计算收缩以适应宽度。您需要将

max width

值设置为

.gridwrapper

，并从fieldset元素调整填充和边框宽度

如果表格足够窄，此布局的宽度将相应缩小

.content包装器{
最小宽度：200px；
最大宽度：400px；
保证金：0自动；
边框：1px红色虚线；
显示：表格；
}
字段集{
显示：内联块；
}
.gridwrapper{
边框：1px纯黑；
溢出-x：自动；
最大宽度：372px；/*您需要为字段集的填充和边框宽度调整400px*/
显示：内联块；
}
桌子{
宽度：自动；
}

字段集图例
我是一个足够长的专栏！！！
我是一个足够长的专栏！！！
我是一个足够长的专栏！！！
我是一个足够长的专栏！！！
我是一个足够长的专栏！！！
我是一个足够长的专栏！！！
我是一个足够长的细胞！！！
我是一个足够长的细胞！！！
我是一个足够长的细胞！！！
我是一个足够长的细胞！！！
我是一个足够长的细胞！！！
我是一个足够长的细胞！！！

谢谢，但我需要100%的字段集宽度，有时它可能比主内容包装器小。您可以重申一下吗？您需要字段集为内容包装器宽度的100%吗？若文件集比内容包装器宽，你们需要文件集的垂直滚动能力吗？我需要一个表的水平滚动能力，当它从gridwrapper中展开时，当gridwrapper在fieldset中展开时。表格必须为GridWrapper的100%宽度第一种解决方案看起来更适合于特定情况，但第二种解决方案似乎适合于常见情况，谢谢！此解决方案将生成一个始终为400px宽的

.content包装器

，因此宽度没有响应。请看：您可以使用jquery@VitorinoFernandes实现这一点。在主内容包装器中可以有很多div，比如说，不使用jquery可以实现这一点吗？我不确定css