代码：https://jsfiddle.net/tukws1ao/
视频：https://dl.dropboxusercontent.com/u/16876271/table-no-scroll.m4v
我在页面底部有这个HTML表格，它是自助响应的，应该在狭窄的屏幕上水平滚动。它适用于所有浏览器，但不适用于IE - 它不会滚动 - 滚动条似乎被冻结（见视频）。
什么使它工作：当我关闭顶部的导航窗格时，它开始滚动-OR-如果我删除表顶部的一堆行 - 它开始滚动。没有意义！如何使其正常滚动？
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>
答案 0 :(得分：0)
您可能确实在Bootstrap中发现了另一个错误。虽然@ captain的解决方案最好遵循，但是您可以在不同设备上显示数据墙（响应表的最佳实践），您可以同时尝试此修复：
@media screen and (max-width: 767px) {
.table-responsive {
-ms-overflow-style: scrollbar !important;
}
}