html - 表的 overflow-x inside fieldset

Question

这里有两个例子:

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

http://jsfiddle.net/8wzLzf09/1/

当表的父 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>

http://jsfiddle.net/8wzLzf09/2/

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

这是什么原因呢？任何人都知道如何解决它？

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

谢谢

Answer 1

您还需要在 fieldset 上设置最小和最大宽度，所以这应该可以完成工作:

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