使Bootstrap表可滾動而不影響網格系統

-2

如何在不影響網格系統的情況下使表格能夠滾動？如何在不干擾col-xs標籤的情況下使表格可以滾動？使Bootstrap表可滾動而不影響網格系統

<table class="col-xs-12"> 
    <thead> 
          <th class="col-xs-2">A</th> 
          <th class="col-xs-1">B</th> 
          <th class="col-xs-1">c</th> 
          <th class="col-xs-2">d</th> 
          <th class="col-xs-2">e</th> 
          <th class="col-xs-1">f</th> 
          <th class="col-xs-1">g</th> 
          <th class="col-xs-1">h</th> 
          <th class="col-xs-1">i</th> 
          </thead> 
          <tbody> 
           <tr> 
           <td><input type="text" class="form-control""></td> 
           <td><input type="text" class="form-control"></td> 
           <td><input type="text" class="form-control"></td> 
           <td><input type="text" class="form-control"></td> 
           <td><input type="text" class="form-control"></td> 
           <td><input type="text" class="form-control"></td> 
           <td><input type="text" class="form-control"></td> 
           <td><input type="text" class="form-control"></td> 
           <td><input type="text" class="form-control"></td> 
           </tr> 
          </tbody> 
         </table>

來源

2014-09-22 user3782454

表格是否需要在所有屏幕尺寸上滾動？

如果你只需要它在小型設備上滾動，你可以用引導的.table-responsive類

http://getbootstrap.com/css/#tables-responsive

來源

2014-09-22 10:42:16 ChaoticNadirs

當tbody有超過3行時，它應該可以滾動:) – user3782454 2014-09-22 10:46:54

@ user3782454啊，我以爲你想要水平滾動而不是垂直。垂直滾動看看這裏的答案：http://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap – ChaoticNadirs 2014-09-22 10:52:33

你試過包裝一個表中的DIV中與table-responsive類和不斷變化的col-xs-12到table或在最壞的情況row？我一直沒有使用Bootstrap，所以如果我錯了，我會很抱歉。

如果你考慮垂直滾動，那麼，表格容器的固定高度（讓它是div）和overflow: scroll？

來源

2014-09-22 10:48:35

使Bootstrap表可滾動而不影響網格系統

回答

相關問題