使宽表适合引导容器答案

【问题标题】：Making wide table fit bootstrap container使宽表适合引导容器
【发布时间】：2014-05-18 19:23:51
【问题描述】：

我有一张这样的桌子：

<!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 时，它的自动宽度为 1400 像素左右。我发现对于 Twitter Bootstrap，我需要应用 width: auto !important 以使其默认不是 100% 宽度，但是我的表格仍然在父容器之外。我尝试使用 col-md-1 属性来应用列宽，但似乎没有太大区别

我发现如果您将table-layout:fixed 应用于表格，它将符合定义的宽度。

我的表格在<div class="table-responsive"> 中，所以我应该将表格的样式设置为width:90% 以尝试使其适合父容器吗？

我只是想知道是否有已知的解决方案来解决使用 Bootstrap 适合父容器宽度的非常宽的表的问题？

谢谢

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

尝试将class="row" 应用于<tr> 元素。

使用行来创建水平的列组。内容应该放在列中，并且只有列可以是行的直接子级。

-- Bootstrap css docs

请注意，行必须放置在 .container（固定宽度）或 .container-fluid（全宽）内以进行正确对齐和填充，因此您可能需要为表或表的父级应用 class=container-fluid它。

【讨论】：

似乎不起作用。如果其中一列的 URL 大小合适，它仍然会溢出
那么问题是如何使表格适合引导容器。做对了吗？
@Jon 你还没有完成我在答案中提到的事情。为所有人添加row。您还必须为每个添加class="col-md-1"，就像您为相关<th> 所做的那样，每个的总数不应超过12。让我知道会发生什么..
对不起。该演示没有显示您的答案，但按照您的建议做似乎没有用
添加

【解决方案2】：

我认为这就是你想要达到的目标？

由于面板主体填充而不会溢出的面板主体内的表格？

<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/4216/

【讨论】：

这非常有效。将table-condensed 类添加到<table> 会减少表格的填充。
第二个小提琴是真正解决问题的小提琴，用.table-responsive div包围桌子。
将table-sm 类添加到<table> 会减少Bootstrap 4 中的表格填充。它应该像<table class="table table-sm">