为什么溢出不能在这个HTML代码中工作？

问题描述：

我需要一个固定的表格，然后我会在固定表格的右边动态地添加表格。为什么溢出不能在这个HTML代码中工作？

我的HTML代码是：

溢出-X：自动不起作用

<div class="col-md-4"> 
    <table class="table table-bordered"> 
     <thead> 
      <tr> 
       <th colspan="2">Fixed Table</th> 
      </tr> 
      <tr> 
       <th colspan="2">Fixed Table</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Some Content</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div class="col-md-8"> 
    <div id="containerForTables" style="overflow-x: auto"> 
     <div style="display: inline-block;"> 
     <table class="table table-bordered" data-tablename="SOMEKEY"> 
      <thead> 
       <tr> 
        <th colspan="3"> 
         SOMEKEY 
        </th> 
       </tr> 
       <tr> 
        <th>SOMEKEY 1</th> 
        <th>SOMEKEY 2</th> 
        <th>SOMEKEY 3</th> 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
     </div> 

     <div style="display: inline-block;"> 
     <table class="table table-bordered" data-tablename="SOMEKEY"> 
      <thead> 
       <tr> 
        <th colspan="3"> 
         SOMEKEY 
        </th> 
       </tr> 
       <tr> 
        <th>SOMEKEY 1</th> 
        <th>SOMEKEY 2</th> 
        <th>SOMEKEY 3</th> 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
     </div> 

     <div style="display: inline-block;"> 
     <table class="table table-bordered" data-tablename="SOMEKEY"> 
      <thead> 
       <tr> 
        <th colspan="3"> 
         SOMEKEY 
        </th> 
       </tr> 
       <tr> 
        <th>SOMEKEY 1</th> 
        <th>SOMEKEY 2</th> 
        <th>SOMEKEY 3</th> 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
     </div> 

     <div style="display: inline-block;"> 
     <table class="table table-bordered" data-tablename="SOMEKEY"> 
      <thead> 
       <tr> 
        <th colspan="3"> 
         SOMEKEY 
        </th> 
       </tr> 
       <tr> 
        <th>SOMEKEY 1</th> 
        <th>SOMEKEY 2</th> 
        <th>SOMEKEY 3</th> 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
     </div> 
     <div style="display: inline-block;"> 
     <table class="table table-bordered" data-tablename="SOMEKEY"> 
      <thead> 
       <tr> 
        <th colspan="3"> 
         SOMEKEY 
        </th> 
       </tr> 
       <tr> 
        <th>SOMEKEY 1</th> 
        <th>SOMEKEY 2</th> 
        <th>SOMEKEY 3</th> 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
     </div> 

     <div style="display: inline-block;"> 
     <table class="table table-bordered" data-tablename="SOMEKEY"> 
      <thead> 
       <tr> 
        <th colspan="3"> 
         SOMEKEY 
        </th> 
       </tr> 
       <tr> 
        <th>SOMEKEY 1</th> 
        <th>SOMEKEY 2</th> 
        <th>SOMEKEY 3</th> 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
     </div> 
     <div style="display: inline-block;"> 
     <table class="table table-bordered" data-tablename="SOMEKEY"> 
      <thead> 
       <tr> 
        <th colspan="3"> 
         SOMEKEY 
        </th> 
       </tr> 
       <tr> 
        <th>SOMEKEY 1</th> 
        <th>SOMEKEY 2</th> 
        <th>SOMEKEY 3</th> 
       </tr> 
      </thead> 
      <tbody></tbody> 
     </table> 
     </div> 
    </div> 
</div>

它输出：

我希望这样的事情（看水平滚动条）：

答

使用[响应电网系统正] http://www.responsivegridsystem.com/

这里是9列响应电网

/* SECTIONS */ 
 
.section { 
 
\t clear: both; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 

 
/* COLUMN SETUP */ 
 
.col { 
 
\t display: block; 
 
\t float:left; 
 
\t margin: 1% 0 1% 1.6%; 
 
} 
 
.col:first-child { margin-left: 0; } 
 

 
/* GROUPING */ 
 
.group:before, 
 
.group:after { content:""; display:table; } 
 
.group:after { clear:both;} 
 
.group { zoom:1; /* For IE 6/7 */ } 
 

 
/* GRID OF NINE */ 
 
.span_9_of_9 { 
 
\t width: 100%; 
 
} 
 

 
.span_8_of_9 { 
 
    \t width: 88.71%; 
 
} 
 

 
.span_7_of_9 { 
 
    \t width: 77.42%; 
 
} 
 

 
.span_6_of_9 { 
 
    \t width: 66.13%; 
 
} 
 

 
.span_5_of_9 { 
 
    \t width: 54.84%; 
 
} 
 

 
.span_4_of_9 { 
 
    \t width: 43.55%; 
 
} 
 

 
.span_3_of_9 { 
 
    \t width: 32.26%; 
 
} 
 

 
.span_2_of_9 { 
 
    \t width: 20.97%; 
 
} 
 

 
.span_1_of_9 { 
 
    \t width: 9.688%; 
 
} 
 

 
/* GO FULL WIDTH BELOW 480 PIXELS */ 
 
@media only screen and (max-width: 480px) { 
 
\t .col { margin: 1% 0 1% 0%; } 
 
\t .span_1_of_9, .span_2_of_9, .span_3_of_9, .span_4_of_9, .span_5_of_9, .span_6_of_9, .span_7_of_9, .span_8_of_9, .span_9_of_9 { width: 100%; } 
 
}

<div class="section group"> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
\t <div class="col span_1_of_9"> 
 
\t 1 of 9 
 
\t </div> 
 
</div>

代码

当你得到你的代码时，你将不得不改变跨度宽度以适应每列的需求，就像这样。

.span_1_of_12 { 
 
\t width: 22.6%; 
 
\t margin: 1% 0 1% 3.2%; 
 
}

为什么溢出不能在这个HTML代码中工作？

相关推荐