Html 制作宽桌适合引导容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22897377/
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
Making wide table fit bootstrap container
提问by Jon
I have a table like so:
我有一张像这样的桌子：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th class="col-md-1">Id</th>
<th class="col-md-1">Enabled</th>
<th class="col-md-1">Shortcode</th>
<th class="col-md-1">Keyword</th>
<th class="col-md-1">Session Based</th>
<th class="col-md-1">Application SMS Endpoint</th>
<th class="col-md-2">Application MMS Endpoint</th>
<th class="col-md-2">Date From</th>
<th class="col-md-2">Date To</th>
</tr>
</thead>
<tbody>
<tr>
<td>1502</td>
<td>True</td>
<td>+44123456789</td>
<td>*</td>
<td>False</td>
<td>http://google.com/sms</td>
<td>NOTUSED</td>
<td>10 March 2014 19:04:15</td>
<td>01 January 2100 00:00:00</td>
</tr>
<tr>
<td>1212</td>
<td>True</td>
<td>+44123456789</td>
<td>*</td>
<td>False</td>
<td>http://somewhere.local:8080/</td>
<td>NOTUSED</td>
<td>06 March 2014 14:00:12</td>
<td>04 March 2034 15:20:05</td>
</tr>
<tr>
<td>1023</td>
<td>True</td>
<td>+44123456789</td>
<td>*</td>
<td>False</td>
<td>http://www.google.com/sms</td>
<td>NOTUSED</td>
<td>26 February 2014 16:35:52</td>
<td>01 January 2100 00:00:00</td>
</tr>
<tr>
<td>1464</td>
<td>True</td>
<td>+44123456789</td>
<td>00LONG</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>10 March 2014 07:19:19</td>
<td>10 March 2034 07:19:19</td>
</tr>
<tr>
<td>1450</td>
<td>True</td>
<td>+44123456789</td>
<td>10</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>10 March 2014 04:25:29</td>
<td>10 March 2034 04:25:29</td>
</tr>
<tr>
<td>1384</td>
<td>True</td>
<td>+44123456789</td>
<td>7</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 04:25:40</td>
<td>07 March 2034 04:25:40</td>
</tr>
<tr>
<td>1397</td>
<td>True</td>
<td>+44123456789</td>
<td>AB</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 08:39:20</td>
<td>07 March 2034 08:39:20</td>
</tr>
<tr>
<td>1393</td>
<td>True</td>
<td>+44123456789</td>
<td>ABRANTEE</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 06:59:16</td>
<td>07 March 2034 06:59:16</td>
</tr>
<tr>
<td>1446</td>
<td>True</td>
<td>+44123456789</td>
<td>BREAKFAST</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>08 March 2014 12:03:46</td>
<td>08 March 2034 12:03:46</td>
</tr>
<tr>
<td>1514</td>
<td>True</td>
<td>+44123456789</td>
<td>CAMPAIGN</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>11 March 2014 04:31:50</td>
<td>11 March 2034 04:31:50</td>
</tr>
<tr>
<td>1515</td>
<td>True</td>
<td>+44123456789</td>
<td>CAMPAIGN1</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>11 March 2014 04:47:27</td>
<td>11 March 2034 04:47:27</td>
</tr>
<tr>
<td>1472</td>
<td>True</td>
<td>+44123456789</td>
<td>D</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>10 March 2014 08:26:27</td>
<td>10 March 2034 08:26:27</td>
</tr>
<tr>
<td>1410</td>
<td>True</td>
<td>+44123456789</td>
<td>GJGJTY</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 10:00:34</td>
<td>07 March 2034 10:00:34</td>
</tr>
<tr>
<td>1390</td>
<td>True</td>
<td>+44123456789</td>
<td>JYJYTJY</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>07 March 2014 05:19:42</td>
<td>07 March 2034 05:19:42</td>
</tr>
<tr>
<td>1322</td>
<td>True</td>
<td>+44123456789</td>
<td>LONGCODE</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>06 March 2014 09:28:39</td>
<td>06 March 2034 09:28:39</td>
</tr>
<tr>
<td>1471</td>
<td>True</td>
<td>+44123456789</td>
<td>LONGCODETHIRTYCAHRACTERKEYWORD</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>10 March 2014 08:26:27</td>
<td>10 March 2034 08:26:27</td>
</tr>
<tr>
<td>1319</td>
<td>True</td>
<td>+44123456789</td>
<td>MARV</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>06 March 2014 08:46:53</td>
<td>06 March 2034 08:46:53</td>
</tr>
<tr>
<td>1503</td>
<td>True</td>
<td>+44123456789</td>
<td>MUM</td>
<td>False</td>
<td>http://www.ff.com/sms</td>
<td>NOTUSED</td>
<td>10 March 2014 19:16:52</td>
<td>17 March 2014 19:16:52</td>
</tr>
<tr>
<td>1447</td>
<td>True</td>
<td>+44123456789</td>
<td>R</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>08 March 2014 12:03:46</td>
<td>08 March 2034 12:03:46</td>
</tr>
<tr>
<td>1281</td>
<td>True</td>
<td>+44123456789</td>
<td>S2</td>
<td>False</td>
<td>http://ggole.com</td>
<td>NOTUSED</td>
<td>06 March 2014 05:31:51</td>
<td>06 March 2034 05:31:51</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
When no CSS is applied it auto widths to be 1400px or so. I have found for Twitter Bootstrap I need to apply width: auto !importantfor it to not be 100% width by default however my table still goes outside the parent container. I have tried to apply column widths using col-md-1attributes but doesn't seem to make much difference
当没有应用 CSS 时，它的自动宽度为 1400px 左右。我发现对于 Twitter Bootstrap，我需要申请width: auto !important它默认不是 100% 宽度，但是我的表仍然在父容器之外。我尝试使用col-md-1属性应用列宽，但似乎没有太大区别
I have found if you apply table-layout:fixedto a table it will conform to a defined width.
我发现如果您应用于table-layout:fixed表格，它将符合定义的宽度。
My table is in a <div class="table-responsive">so should I set a style for my table as width:90%to try and make it fit within the parent container?
我的桌子在里面，<div class="table-responsive">所以我应该为我的桌子设置一个样式width:90%来尝试让它适合父容器吗？
I'm just wondering if there is a known solution to solve the problem of having a very wide table with Bootstrap fitting the parent container width?
我只是想知道是否有一个已知的解决方案来解决使用 Bootstrap 匹配父容器宽度的非常宽的表格的问题？
Thanks
谢谢
回答by Jon
Adding style to the <td>seemed to fix this
添加样式<td>似乎解决了这个问题
<td style ="word-break:break-all;">
<td style ="word-break:break-all;">
回答by Phil
I think this is what you are trying to achieve?
我认为这就是你想要达到的目标？
A table inside a panel-body that doesn't overflow due to the panel-body padding?
由于面板主体填充而不会溢出的面板主体内的桌子？
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel-body">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
http://jsfiddle.net/52VtD/4215/
http://jsfiddle.net/52VtD/4215/
and your full sample:
和你的完整样本：
回答by G.Abdessalem
You must add this class to the container so it will be like this:
你必须将这个类添加到容器中，所以它会是这样的：
<div class="table-responsive fixed-table-body">
OR
或者
<div class="table-responsive table-body">
回答by DerfOh
I fixed the same issue by changing <div class="container">...</div>to <div class="container-fluid">...</div>
我通过更改<div class="container">...</div>为解决了同样的问题<div class="container-fluid">...</div>
回答by T J
Try applying class="row"for the <tr>elements.
尝试应用class="row"的<tr>元素。
Use rows to create horizontal groups of columns. Content should be placed within columns, and only columns may be immediate children of rows.
使用行创建水平的列组。内容应该放在列中，并且只有列可以是行的直接子项。
note that Rows must be placed within a .container(fixed-width) or .container-fluid(full-width) for proper alignment and padding, so you might want to apply class=container-fluidfor the table or a parent of it.
请注意，行必须放置在.container（固定宽度）或.container-fluid（全宽）内才能正确对齐和填充，因此您可能想要申请class=container-fluid表格或其父级。
