JSFiddle：http://jsfiddle.net/ardave/8DR6n/3/ 全屏JSFiddle：http://jsfiddle.net/ardave/8DR6n/3/embedded/result/
我在页面的右下角有三个div，每个div都包含一个带有文本的html表格，并且在大多数桌面分辨率下都可以正常显示。
但是，当我水平缩小窗口或在某些移动设备上查看窗口时，表格的内容会相互重叠。
这个问题出现就像窗口大小低于979像素宽，这与平板电脑尺寸的bootstrap-responsive.css媒体查询一致，所以我确定这是相关的，但我不知道如何计算如何或为什么。
这个问题也与顶部导航栏的宽度消失有关，但同样，我不知道怎么说或为什么。
我发现的另一个可能有用的东西是当窗口大小以便存在问题时，当我将鼠标悬停在Chrome中“Elements”调试器窗口中的span或table元素上时，我可以清楚地看到表的列超出了表本身的大小，超过了包含表的span4 div的大小。
我真的不希望内容明显溢出，我认为这是当前的问题，但我也不想隐藏或滚动溢出。我真的很喜欢表格文本保持不重叠的大小，直到一旦屏幕变得太窄，表格/ span4s被迫通过堆叠在彼此之上而作出响应。
非常感谢任何帮助。
似乎可能过多了，但我想我想要包含代码本身而不仅仅是jsfiddle的链接，所以这里（假设引用bootstrap.css和bootstrap-responsive.css）
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">View All</li>
<li><a href="/Search/Search">View All</a>
</li>
</ul>
</div>
</div>
<div class="span9">
<div class="hero-unit">
<h1>My Site Name</h1>
<p>Introductory stuff</p>
<p> <a class="btn btn-primary btn-large" href="/Home/About">About »</a>
</p>
</div>
<div class="container">
<div class="row-fluid">
<div class="span4">
<h2>Newest Entries</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>1/28/2013</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>12/4/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/9/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/31/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/31/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/30/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/17/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/15/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>9/29/2012</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>9/21/2012</td>
</tr>
</table>
</div>
<!--/span-->
<div class="span4">
<h2>Latest Stuff</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/9/2012</td>
<td>10.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/7/2012</td>
<td>8.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/4/2012</td>
<td>10.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/11/2012</td>
<td>7.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>9/13/2012</td>
<td>9.0</td>
</tr>
<tr>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>9/6/2012</td>
<td>7.0</td>
</tr>
</table>
</div>
<!--/span-->
<div class="span4">
<h2>Needing Inputs</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>1/28/2013</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>12/4/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/18/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/9/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/7/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>11/5/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/31/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/30/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/30/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
<td>10/18/2012</td>
<td> <a href="/stuff/stuff">Lots of stuff</a>
</td>
</tr>
</tbody>
</table>
</div>
<!--/span-->
</div>
</div>
<div>
<p></p>
<p>Here's a big blob of text!</p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Some Company</p>
</footer>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-collapse collapse"> <a class="brand" href="/">TheSiteName.com</a>
<form action="/Search/Search"
class="navbar-search pull-left" method="get">
<input type="text" class="search-query" placeholder="Search by Name" name="SearchQuery"
/>
</form>
<form ReturnUrl="" action="/Account/ExternalLogin" class="navbar-form pull-right"
method="post">
<button type="submit" name="provider" value="facebook" class="logonpartialextlogin"
title="Log in using your Facebook account">
<img src="/Images/facebook.png" />
</button>
<button type="submit" name="provider" value="twitter" class="logonpartialextlogin"
title="Log in using your Twitter account">
<img src="/Images/twitter-bird-white-on-blue.png" />
</button>
<button type="submit" name="provider" value="google" class="logonpartialextlogin"
title="Log in using your Google account">
<img src="/Images/google-icon.png" />
</button>
</form>
<form action="/Account/Register" class="navbar-form pull-right" method="get">
<button type="submit" class="btn">Register</button>
</form>
<form action="/Account/LogOn" class="navbar-form pull-right" method="post">
<input class="span2" type="text" placeholder="Email" name="UserName" />
<input class="span2" type="password" placeholder="Password" name="Password"
/>
<button type="submit" class="btn">Sign in</button>
</form>
</div>
</div>
</div>
</div>
答案 0 :(得分：20)
我知道这个帖子已经有几个月了，但我也知道当有人发布一个适合他们类似情况的答案时，我真的很感激。这是我在bootstrap 2和3中的方式。
.cw-table-list{
margin:0px !important;
table-layout:fixed;
}
.cw-table-list td{
padding-bottom: 0px !important;
overflow:hidden;
}
希望这会有所帮助。 抽搐
答案 1 :(得分：15)
我无法告诉你“Bootstrap方式”来解决这个问题，因为我没有使用它。我可以告诉你为什么：你的内容不允许它在那个断点处。
因为表的行没有环绕（即每行的所有单元格必须出现在同一行上），所以每个给定的表可以调整大小的绝对最小宽度，这取决于像每个单元格的填充和最宽的非包装内容。对于你的表格，它们可以去的最小值是“Column”，“Column”和“10/11/2012”的宽度等于加48px（每边8px填充乘以3）。
span4仅允许为724px（.container祖先元素上的定义）的31.49％，这不足以包含最小可能宽度的表。
我的建议是不要尝试将所有3个表并排放置。您的显示器必须格外宽，以使其看起来不显眼，不会有水平滚动。
答案 2 :(得分：10)
你可以应用style =“overflow：auto;”在你的桌子上放一个水平滚动条。因此，设计仍将保持响应。请遵循以下代码：
.table-scrollable{
overflow: auto;
}
并在父div上使用它：
<div class='table-scrollable'>
答案 3 :(得分：3)
将表格的容器元素分配为overflow: auto;，将表格本身分配为table-layout: fixed;
.ie-table-fix {
overflow: auto;
}
.ie-table-fix > table {
table-layout: fixed;
}