引導響應表 - 不會在IE horizontaly滾動

代碼：https://jsfiddle.net/tukws1ao/引導響應表 - 不會在IE horizontaly滾動

視頻：https://dl.dropboxusercontent.com/u/16876271/table-no-scroll.m4v

我有這樣的HTML表中是引導反應靈敏，應該在狹窄的水平滾動頁面的底部屏幕。它適用於所有瀏覽器，但不在IE中 - 它不滾動 - 滾動條似乎被凍結（請參閱視頻）。

是什麼讓它工作：當我關閉頂部的導航窗格時，它開始滾動 - 或 - 如果我刪除表頂部的一堆行 - 它開始滾動。沒有意義！我如何使它正常滾動？

CODE：

<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3 col-lg-2"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <hr class="mu-white-xs mu-white-sm"> 
      <div class="panel-group" role="tablist"> 
       <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="muItemTypesHeading"> 
        <h4 class="panel-title"><a href="#muItemTypes" class="" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="muItemTypes">Select Item Type</a></h4> 
       </div> 
       <div class="panel-collapse collapse in" role="tabpanel" id="muItemTypes" aria-labelledby="muItemTypesHeading" aria-expanded="true"> 
        <ul class="list-group"> 
        <li class="list-group-item"><a href="#">Item 1<span class="badge">9</span></a></li> 
        <li class="list-group-item"><a href="#">Some other item 2<span class="badge">9</span></a></li> 
        <li class="list-group-item active"><a href="#">AMS_TEST_ITEM<span class="badge">0</span></a></li> 
        <li class="list-group-item"><a href="#">CalendarEvents<span class="badge">9</span></a></li> 
        <li class="list-group-item"><a href="#">DublinCore<span class="badge">3273</span></a></li> 
        </ul> 
       </div> 
       <!-- end muItemTypes --> 
       </div> 
      </div> 
      <!-- end panel group --> 

      </div> 
      <!-- end col --> 
     </div> 
     <!-- end row --> 
     </div> 
     <!-- end col --> 

     <div class="col-md-9 col-lg-10 mu-hr-left" id="mu-item-types__attributes"> 
     <div class="row"> 
      <div class="col-md-5 col-lg-3 mu-search"> 
      <label class="sr-only" for="mu-search-attributes">Search attributes</label> 
      <input type="text" class="form-control search" id="mu-search-attributes" placeholder="Search attributes..." maxlength="100"> 
      <span class="glyphicon glyphicon-search mu-search__search-ico"></span><span class="glyphicon glyphicon-remove mu-search__reset-ico"></span></div> 
      <!-- end col --> 

     </div> 
     <!-- end row --> 

     <div class="row"> 
      <div class="col-md-12"> 
      <hr class="mu-spacer mu-white-xs mu-white-sm"> 
      </div> 
      <!-- end col --> 
     </div> 
     <!-- end row --> 

     <div class="row"> 
      <div class="col-md-12"> 
      <ul class="nav nav-tabs"> 
       <li class="active"><a href="#">User</a></li> 
       <li><a href="#">Info</a></li> 
       <li><a href="#">System</a></li> 
      </ul> 
      </div> 
      <!-- end col --> 

      <div class="col-md-11 mu-pad-bottom mu-pad-top"><a class="small" href="" title="Hide Tabs"><small>Hide Tabs</small></a></div> 
      <!-- end col --> 
      <div class="col-md-1 mu-pad-bottom mu-pad-top text-right"><a href="" title="Help"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></a></div> 
      <!-- end col --> 

     </div> 
     <!-- end row --> 
     <div class="row"> 
      <div class="col-md-12 table-responsive"> 
      <table class="table table-hover"> 
       <thead> 
       <tr> 
        <th>Internal Name</th> 
        <th>Display Name</th> 
        <th>ID</th> 
        <th>Required</th> 
        <th>Show</th> 
        <th>Edit</th> 
        <th>Keyword</th> 
        <th>Type</th> 
        <th>Form Type</th> 
        <th>Min</th> 
        <th>Max</th> 
       </tr> 
       </thead> 
       <tbody class="list"> 
       <tr> 
        <td class="mu-searchable">AMS_STOR_STATUS</td> 
        <td>StorageStatus</td> 
        <td> 
        <label class="sr-only" for="i100">ID</label> 
        <input type="checkbox" id="i100"> 
        </td> 
        <td> 
        <label class="sr-only" for=i101>Required</label> 
        <input type="checkbox" checked id="i101"> 
        </td> 
        <td> 
        <label class="sr-only" for="i102">Show</label> 
        <input type="checkbox" id="i102"> 
        </td> 
        <td> 
        <label class="sr-only" for="i103">Edit</label> 
        <input type="checkbox" id="i103"> 
        </td> 
        <td> 
        <label class="sr-only" for="i104">Keyword</label> 
        <input type="checkbox" id="i104"> 
        </td> 
        <td> 
        <label class="sr-only" for="i105">Type</label> 
        <select id="i105"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i106">Type</label> 
        <select id="i106"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
       <tr> 
        <td class="mu-searchable">AMS_SZ</td> 
        <td>Size</td> 
        <td> 
        <label class="sr-only" for="i107">ID</label> 
        <input type="checkbox" id="i107"> 
        </td> 
        <td> 
        <label class="sr-only" for="i108">Required</label> 
        <input type="checkbox" id="i108"> 
        </td> 
        <td> 
        <label class="sr-only" for="i109">Show</label> 
        <input type="checkbox" id="i109"> 
        </td> 
        <td> 
        <label class="sr-only" for="i110">Edit</label> 
        <input type="checkbox" id="i110"> 
        </td> 
        <td> 
        <label class="sr-only" for="i111">Keyword</label> 
        <input type="checkbox" checked id="i111"> 
        </td> 
        <td> 
        <label class="sr-only" for="i112">Keyword</label> 
        <select id="i112"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i113">Keyword</label> 
        <select id="i113"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>0</td> 
        <td>100000</td> 
       </tr> 
       <tr> 
        <td class="mu-searchable">ACLCODE</td> 
        <td>ACL</td> 
        <td> 
        <label class="sr-only" for="i114">ID</label> 
        <input type="checkbox" id="i114"> 
        </td> 
        <td> 
        <label class="sr-only" for="i115">Required</label> 
        <input type="checkbox" id="i115"> 
        </td> 
        <td> 
        <label class="sr-only" for="i116">Show</label> 
        <input type="checkbox" id="i116"> 
        </td> 
        <td> 
        <label class="sr-only" for="i117">Edit</label> 
        <input type="checkbox" id="i117"> 
        </td> 
        <td> 
        <label class="sr-only" for="i118">Keyword</label> 
        <input type="checkbox" id="i118"> 
        </td> 
        <td> 
        <label class="sr-only" for="i119">Keyword</label> 
        <select id="i119"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i120">Keyword</label> 
        <select id="i120"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>-88888</td> 
        <td>88888</td> 
       </tr> 
       <tr> 
        <td class="mu-searchable">AMS_STOR_STATUS</td> 
        <td>StorageStatus</td> 
        <td> 
        <label class="sr-only" for="i100">ID</label> 
        <input type="checkbox" id="i100"> 
        </td> 
        <td> 
        <label class="sr-only" for=i101>Required</label> 
        <input type="checkbox" checked id="i101"> 
        </td> 
        <td> 
        <label class="sr-only" for="i102">Show</label> 
        <input type="checkbox" id="i102"> 
        </td> 
        <td> 
        <label class="sr-only" for="i103">Edit</label> 
        <input type="checkbox" id="i103"> 
        </td> 
        <td> 
        <label class="sr-only" for="i104">Keyword</label> 
        <input type="checkbox" id="i104"> 
        </td> 
        <td> 
        <label class="sr-only" for="i105">Type</label> 
        <select id="i105"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i106">Type</label> 
        <select id="i106"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
       <tr> 
        <td class="mu-searchable">AMS_SZ</td> 
        <td>Size</td> 
        <td> 
        <label class="sr-only" for="i107">ID</label> 
        <input type="checkbox" id="i107"> 
        </td> 
        <td> 
        <label class="sr-only" for="i108">Required</label> 
        <input type="checkbox" id="i108"> 
        </td> 
        <td> 
        <label class="sr-only" for="i109">Show</label> 
        <input type="checkbox" id="i109"> 
        </td> 
        <td> 
        <label class="sr-only" for="i110">Edit</label> 
        <input type="checkbox" id="i110"> 
        </td> 
        <td> 
        <label class="sr-only" for="i111">Keyword</label> 
        <input type="checkbox" checked id="i111"> 
        </td> 
        <td> 
        <label class="sr-only" for="i112">Keyword</label> 
        <select id="i112"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i113">Keyword</label> 
        <select id="i113"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>0</td> 
        <td>100000</td> 
       </tr> 
       <tr> 
        <td class="mu-searchable">ACLCODE</td> 
        <td>ACL</td> 
        <td> 
        <label class="sr-only" for="i114">ID</label> 
        <input type="checkbox" id="i114"> 
        </td> 
        <td> 
        <label class="sr-only" for="i115">Required</label> 
        <input type="checkbox" id="i115"> 
        </td> 
        <td> 
        <label class="sr-only" for="i116">Show</label> 
        <input type="checkbox" id="i116"> 
        </td> 
        <td> 
        <label class="sr-only" for="i117">Edit</label> 
        <input type="checkbox" id="i117"> 
        </td> 
        <td> 
        <label class="sr-only" for="i118">Keyword</label> 
        <input type="checkbox" id="i118"> 
        </td> 
        <td> 
        <label class="sr-only" for="i119">Keyword</label> 
        <select id="i119"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i120">Keyword</label> 
        <select id="i120"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>-88888</td> 
        <td>88888</td> 
       </tr> 
       <tr> 
        <td class="mu-searchable">AMS_STOR_STATUS</td> 
        <td>StorageStatus</td> 
        <td> 
        <label class="sr-only" for="i100">ID</label> 
        <input type="checkbox" id="i100"> 
        </td> 
        <td> 
        <label class="sr-only" for=i101>Required</label> 
        <input type="checkbox" checked id="i101"> 
        </td> 
        <td> 
        <label class="sr-only" for="i102">Show</label> 
        <input type="checkbox" id="i102"> 
        </td> 
        <td> 
        <label class="sr-only" for="i103">Edit</label> 
        <input type="checkbox" id="i103"> 
        </td> 
        <td> 
        <label class="sr-only" for="i104">Keyword</label> 
        <input type="checkbox" id="i104"> 
        </td> 
        <td> 
        <label class="sr-only" for="i105">Type</label> 
        <select id="i105"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i106">Type</label> 
        <select id="i106"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
       <tr> 
        <td class="mu-searchable">AMS_SZ</td> 
        <td>Size</td> 
        <td> 
        <label class="sr-only" for="i107">ID</label> 
        <input type="checkbox" id="i107"> 
        </td> 
        <td> 
        <label class="sr-only" for="i108">Required</label> 
        <input type="checkbox" id="i108"> 
        </td> 
        <td> 
        <label class="sr-only" for="i109">Show</label> 
        <input type="checkbox" id="i109"> 
        </td> 
        <td> 
        <label class="sr-only" for="i110">Edit</label> 
        <input type="checkbox" id="i110"> 
        </td> 
        <td> 
        <label class="sr-only" for="i111">Keyword</label> 
        <input type="checkbox" checked id="i111"> 
        </td> 
        <td> 
        <label class="sr-only" for="i112">Keyword</label> 
        <select id="i112"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i113">Keyword</label> 
        <select id="i113"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>0</td> 
        <td>100000</td> 
       </tr> 
       <tr> 
        <td class="mu-searchable">ACLCODE</td> 
        <td>ACL</td> 
        <td> 
        <label class="sr-only" for="i114">ID</label> 
        <input type="checkbox" id="i114"> 
        </td> 
        <td> 
        <label class="sr-only" for="i115">Required</label> 
        <input type="checkbox" id="i115"> 
        </td> 
        <td> 
        <label class="sr-only" for="i116">Show</label> 
        <input type="checkbox" id="i116"> 
        </td> 
        <td> 
        <label class="sr-only" for="i117">Edit</label> 
        <input type="checkbox" id="i117"> 
        </td> 
        <td> 
        <label class="sr-only" for="i118">Keyword</label> 
        <input type="checkbox" id="i118"> 
        </td> 
        <td> 
        <label class="sr-only" for="i119">Keyword</label> 
        <select id="i119"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td> 
        <label class="sr-only" for="i120">Keyword</label> 
        <select id="i120"> 
         <option>String</option> 
         <option>Integer</option> 
         <option>Short</option> 
        </select> 
        </td> 
        <td>-88888</td> 
        <td>88888</td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
      <!-- end col --> 
     </div> 
     <!-- end row --> 

     </div> 
     <!-- end col --> 

    </div> 
    <!-- end row --> 

    </div> 
    <!-- end container-fluid --> 




    <script src="bootstrap/js/bootstrap.min.js"></script> 

    <script src="bootstrap-toolkit/bootstrap-toolkit.min.js"></script> 
</body>

來源

2016-12-06 janeh

這似乎在我的比賽中工作得很好。 IE 10,9和Edge。 – Vcasso

奇怪，你可以在vide中看到我的滾動條是「凍結的」。 – janeh

你可能會發現另一個錯誤的引導的確。雖然@隊長的解決方案是最好的遲早跟隨或以後你會打數據的牆上，你可以在不同的設備上顯示（與響應表的最佳實踐），你可以試試這個修復的同時：

@media screen and (max-width: 767px) { 
    .table-responsive { 
     -ms-overflow-style: scrollbar !important; 
    } 
}

來源

2016-12-06 23:58:01

我沒有看到@隊長的解決方案。有人發佈和刪除？您的解決方案解決了問題。然而，我可能不得不忘記在這裏使用表格，並使用div來代替... – janeh

表格是表格數據，所以我不認爲這應該用div來解決，但是 - 容納大量表格數據是一項挑戰在所有設備上，Captain發送了這樣的內容：https：//css-tricks.com/responsive-data-tables/。乾杯，很高興它有幫助。 –

引導響應表 - 不會在IE horizo​​ntaly滾動

回答

相關問題

引導響應表 - 不會在IE horizontaly滾動