表的内部字段集

这里溢出-x是两个样本：表的内部字段集

<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/

溢出-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无法正常工作div里面的fieldset，它允许扩大表格的宽度

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

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

感谢

来源

2014-10-03 Sibay

你可以做到这一点使用jQuery http://jsfiddle.net/victor_007/eg4tw/3/ – 2014-10-03 12:22:20

@VitorinoFernandes可以有很多主要内容，包装内的div，像这样http://jsfiddle.net/eg4tw/5/是否有可能做到这一点与出使用jQuery？ – Sibay 2014-10-03 12:29:37

m不知道css – 2014-10-03 12:48:50

您需要最小和字段集最大宽度太大，所以这应该做的工作：

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

来源

2014-10-03 12:16:17 robjez

谢谢，但我需要100％的字段集宽度，有时它可能比主要内容包装更小 – Sibay 2014-10-03 12:20:26

你能重申 - 你需要fieldset是100％宽度的内容包装吗？如果要比内容包装更广泛，你是否需要一个字段的垂直滚动能力？ – robjez 2014-10-03 12:27:42

我需要一个表的能力，当它扩展出gridwrapper时，以及当fieldset中的gridwrapper被水平滚动时。表格必须是100％宽度的网格包装器 – Sibay 2014-10-03 12:35:03

解决方案

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

来源

2014-10-03 12:20:02

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

如果表格足够窄，此布局将以宽度为响应收缩。

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

<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>

来源

2014-10-03 12:57:33

表的内部字段集

回答

相关问题