CSS 在某些分辨率下，为什么 <table> 内容超出了包含 BootStrap“跨度”和重叠的范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14926577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is <table> content extending beyond containing BootStrap "span" and overlapping, at some resolutions?
提问by Twitch
JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/Full Screen JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/embedded/result/
JSFiddle：http: //jsfiddle.net/ardave/8DR6n/3/全屏 JSFiddle：http: //jsfiddle.net/ardave/8DR6n/3/embedded/result/
I've got these three divs at the bottom right of the page, each containing an html table with text, and it all displays fine at most desktop resolutions.
我在页面的右下角有这三个 div，每个 div 都包含一个带有文本的 html 表，并且在大多数桌面分辨率下都可以正常显示。
However, when I shrink my window horizontally, or when I view it on certain mobile devices, the tables' contents overlap each other.
但是，当我水平缩小窗口或在某些移动设备上查看它时，表格的内容会相互重叠。
This problem appears just as the window is sized below 979 pixels wide, which coincides with the bootstrap-responsive.css media query for tablet size, so I'm sure this is related, but I don't know enough to figure out how or why.
这个问题出现在窗口大小低于 979 像素宽时，这与平板电脑大小的 bootstrap-responsive.css 媒体查询相吻合，所以我确定这是相关的，但我不知道如何或为什么。
The problem also coincides with the width that the navbar across the top disappears, though again, I don't know enough to say how or why.
问题也与顶部导航栏消失的宽度相吻合，但同样，我不知道如何或为什么。
The only other possibly useful thing I've discovered is that when the window is sized so that the problem exists, when I hover over the span or table elements in the "Elements" debugger window in Chrome, I can clearly see that the tables' columns extend past the size of the tables themselves, and past the sizes of the span4 divs that contain the tables.
我发现的唯一其他可能有用的事情是，当窗口大小设置为存在问题时，当我将鼠标悬停在 Chrome 的“元素”调试器窗口中的跨度或表格元素上时，我可以清楚地看到表格列超出了表格本身的大小，也超出了包含表格的 span4 div 的大小。
I don't really want the content to overflow visibly, which I think is the current problem, however I also don't want to hide or scroll the overflow. I'd really just like the table text to stay at a non-overlapping size until the tables/span4s are forced to respond responsively by stacking on top of each other once the screen gets too narrow.
我真的不希望内容明显溢出，我认为这是当前的问题，但是我也不想隐藏或滚动溢出。我真的只是希望表格文本保持不重叠的大小，直到表格/span4s 被迫在屏幕变得太窄时通过堆叠在彼此之上来做出响应。
Any help would be greatly appreciated.
任何帮助将不胜感激。
It seems possibly excessive, but I guess SO wants me to include the code itself rather than just the links to jsfiddle, so here goes (assume that bootstrap.css and bootstrap-responsive.css are referenced)
这似乎可能过多，但我想 SO 希望我包含代码本身，而不仅仅是指向 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>
采纳答案by cimmanon
I can't tell you the "Bootstrap way" to fix this, since I don't use it. I can tell you the why: Your content doesn't allow it at that breakpoint.
我不能告诉你解决这个问题的“引导方式”，因为我不使用它。我可以告诉您原因：您的内容在该断点处不允许这样做。
Because rows of tables don't wrap around (ie. all of the cells for each row must appear on the same line), there is an absolute minimum width that every given table can resize down to, which depends on things like paddings and the widest non-wrapping content for each cell. For your tables, the smallest they can go is whatever the width of "Column", "Column", and "10/11/2012" equal out to plus 48px (8px padding on each side times 3).
因为表格的行不会环绕（即每行的所有单元格都必须出现在同一行上），所以每个给定的表格都可以调整到一个绝对的最小宽度，这取决于填充和每个单元格的最宽非包装内容。对于您的表格，它们可以达到的最小宽度是“Column”、“Column”和“10/11/2012”的宽度等于 48px（每边 8px 填充乘以 3）。
The span4s are only allowed to be 31.49% of 724px (definition on .containerancestor element), which isn't wide enough to contain the tables at their smallest possible width.
所述span4s的只允许是724px（上定义31.49％.container祖先元素），这是不足够宽以包含表在其最小可能宽度。
My recommendation would be to not try and place all 3 tables side by side. Your display would have to be exceptionally wide in order for it to not look cramped and not have horizontal scrolling.
我的建议是不要尝试并排放置所有 3 张桌子。您的显示器必须非常宽，才能使其看起来不局促且不会水平滚动。
回答by Twitch
I know this thread is several months old, but I also know that I really appreciate when someone posts an answer that worked for their similar situation. Here's the way I did it in bootstrap 2 and 3.
我知道这个帖子已经有几个月的历史了，但我也知道当有人发布适用于他们类似情况的答案时，我真的很感激。这是我在引导程序 2 和 3 中的做法。
.cw-table-list{
margin:0px !important;
table-layout:fixed;
}
.cw-table-list td{
padding-bottom: 0px !important;
overflow:hidden;
}
Hope this helps. Twitch
希望这可以帮助。抽搐
回答by Eduardo Arruda Pimentel
You can apply the style = "overflow: auto;" to put a horizontal scroll bar at your table. Thus the design will still remain responsive. Follow the code:
您可以应用样式 = "overflow: auto;" 在你的桌子上放一个水平滚动条。因此，设计仍将保持响应。按照代码：
.table-scrollable{
overflow: auto;
}
And use it on your parent div:
并在您的父 div 上使用它：
<div class='table-scrollable'>
回答by nick
Assign the table's container element with overflow: auto;and the table itself with table-layout: fixed;
分配表的容器元素overflow: auto;和表本身table-layout: fixed;
.ie-table-fix {
overflow: auto;
}
.ie-table-fix > table {
table-layout: fixed;
}
