在溢出之外显示滚动条

时间：2017-12-12 14:11:16

标签： html css html-table

我有一张桌子，里面有几列水平可滚动。 该表可以有数百行，因此它被放入一个可滚动的div容器中。

|--------------------|   ||
| table              |   ||
|--------------------|   ||
|  |       |  |  |   |   ||
|  |       |  |  |   |   ||
|--------------------|   ||
    =======              ||

FIDDLE DEMO

到目前为止，功能还可以。但无论垂直滚动位置如何，水平滚动条应始终可见。怎么办呢？

＆＃13;
＆＃13; 
body { 
  padding: 20px;
}

table {
    border-collapse:collapse;
}

th,td {
    padding: 5px;
    border: 1px solid #000;
    white-space: nowrap;
    }
    
th { font-weight: bold; }
    

.table1, .table3 {
    float: left;   
}        
.table2 {
    float: left;
    width: 300px;
    overflow: auto;  
}

#wrapper {
  width: auto; 
  height: 120px; 
  overflow-y: scroll
}
＆＃13; 
<div id="wrapper">
    
    <table class="table1">
      <tr>
        <thead>
          <th colspan="2">Termin</th>
        </thead>
      </tr>
      <tr>
        <td>Di</td>
        <td>12.12.2017</td>
      </tr>
      <tr>
        <td>Di</td>
        <td>19.12.2017</td>
      </tr>
      <tr>
        <td>Mi</td>
        <td>13.12.2017</td>
      </tr>
      <tr>
        <td>Mi</td>
        <td>20.12.2017</td>
      </tr>
      <tr>
        <td>Fr</td>
        <td>15.12.2017</td>
      </tr>
      <tr>
        <td>Fr</td>
        <td>22.12.2017</td>
      </tr>
    </table>    

    <div class="table2">
    <table>
      <tr>
        <thead>
           <th class="duration">0</th>
           <th class="duration">1</th>
           <th class="duration">2</th>
           <th class="duration">3</th>
           <th class="duration">4</th>
           <th class="duration">5</th>
           <th class="duration">6</th>
           <th class="duration">7</th>
           <th class="duration">8</th>
           <th class="duration">9</th>
           <th class="duration">10</th>
           <th class="duration">11</th>
           <th class="duration">12</th>
           <th class="duration">13</th>
           <th class="duration">14</th>
           <th class="duration">15</th>
        </thead>
      </tr>
      <tr>
        <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>       
      </tr> 
      <tr>
       <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>        
      </tr> 
      <tr>
        <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>       
      </tr> 
      <tr>
        <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>        
      </tr> 
      <tr>
        <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>        
      </tr> 
      <tr>
        <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>        
      </tr> 
    </table>    
    </div>
    
    
    <table class="table3">
      <tr>
        <thead>
          <th>Zimmertyp</th>
          <th>Verpflegung</th>
          <th>Prei p.P.</th>
        </thead>
      </tr>
      <tr>
        <td>DZ</td>     
        <td>HP</td>
        <td>79,- &euro;</td>
      </tr>
      <tr>
        <td>Junior Suite</td>     
        <td>VP</td>
        <td>279,- &euro;</td>
      </tr>
      <tr>
        <td>DZ</td>     
        <td>ÜF</td>
        <td>54,- &euro;</td>
      </tr>
      <tr>
        <td>Suite</td>     
        <td>AI</td>
        <td>319,- &euro;</td>
      </tr>
      <tr>
        <td>DZ</td>     
        <td>HP</td>
        <td>79,- &euro;</td>
      </tr>
      <tr>
        <td>DZ</td>     
        <td>HP</td>
        <td>79,- &euro;</td>
      </tr>
    </table> 

</div>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题