制作宽桌适合引导容器 [英] Making wide table fit bootstrap container
本文介绍了制作宽桌适合引导容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的表：
<!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>
当没有应用CSS时，它的自动宽度为1400px左右。我找到了Twitter Bootstrap我需要应用 width：auto！important 它不是100％的宽度默认情况下，我的表仍然超出父容器。我尝试使用 col-md-1 属性应用列宽，但似乎没有太大的区别
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 !important for 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-1 attributes but doesn't seem to make much difference
我发现如果你应用 table-layout：fixed 到一个表，它将符合一个已定义的宽度。
I have found if you apply table-layout:fixed to a table it will conform to a defined width.
我的表是在< div class =table-responsive> 所以我应该设置一个样式为我的表 width：90
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?
我只想知道是否有一个已知的解决方案来解决问题。有一个非常宽的表与Bootstrap适配父容器宽度？
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?
感谢
推荐答案
添加样式到< td> 似乎可以解决这个问题
Adding style to the <td> seemed to fix this
< td style =word-break：break-all;>
这篇关于制作宽桌适合引导容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
