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/

当table的父div在另一个div

中时，溢出-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时，溢出-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%;
}

Answer 2

解决方案

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

Answer 3

这是一种做法。将display: inline-block应用于fieldset和.gridwrapper，将display: table应用于.content-wrapper。这将强制内容计算收缩到适合的宽度。您需要将max-width值设置为.gridwrapper，并根据fieldset元素调整填充和边框宽度。

如果表格足够窄，这个布局会相应缩小宽度。

＆＃13;

.content-wrapper {
  min-width: 200px;
  max-width: 400px;
  margin: 0 auto;
  border: 1px dashed red;
  display: table;
}
fieldset {
  display: inline-block;
}
.gridwrapper {
  border: 1px solid black;
  overflow-x: auto;
  max-width: 372px; /* you need to adjust 400px for padding and border width of fieldset */
  display: inline-block;
}
table {
  width: auto;
}

＆＃13;

<div class="content-wrapper">
  <fieldset>
    <legend>Fieldset legend</legend>
    <div class="gridwrapper">
      <table>
        <thead>
          <tr>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
            <th>Im a long enough column!!!</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
            <td>Im a long enough cell!!!</td>
          </tr>
        </tbody>
      </table>
    </div>
  </fieldset>
</div>

＆＃13;

表的溢出-x内部字段集

3 个答案: