制作宽桌适合自举容器

Question

制作宽桌适合自举容器

我有一张像这样的桌子:

<!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>

Run Code Online (Sandbox Code Playgroud)

当没有应用CSS时,它的自动宽度为1400px左右.我发现Twitter Bootstrap我需要申请width: auto !important它默认不是100%宽度,但我的表仍然在父容器之外.我试图使用col-md-1属性应用列宽,但似乎没有太大的区别

我发现如果你应用于table-layout:fixed一个表它将符合一个定义的宽度.

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

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

谢谢

Answer 1

Jon*_*Jon 46

添加样式<td>似乎解决了这个问题

<td style ="word-break:break-all;">

这对我有用。但更好的选择可能是“word-break: break-word”，它会尝试在单词边界而不是单词中间中断 (3认同)
我用`<td style ="word-break:break-word;">`这实现了我想要的行为. (3认同)
这次真是万分感谢.我只是有同样的问题,这解决了它. (2认同)
您可以添加的另一件事是“font-size: 90%;” 所以文本会更小，列中的断行更少。您还可以在缩小文本后加粗文本或设置颜色以便于阅读。 (2认同)

Answer 2

Phi*_*hil 22

我想这就是你想要实现的目标？

面板体内的一个桌子,由于面板体填充物不会溢出？

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

Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/52VtD/4215/

和你的完整样本:

http://jsfiddle.net/52VtD/4216/

Answer 3

G.A*_*lem 14

你必须将这个类添加到容器中，所以它会是这样的：

<div class="table-responsive fixed-table-body">

Run Code Online (Sandbox Code Playgroud)

或者

<div class="table-responsive table-body">

Run Code Online (Sandbox Code Playgroud)

确认解决了我所有的日常问题，谢谢老兄 (2认同)

Answer 4

小智 5

我通过更改<div class="container">...</div>为解决了相同的问题<div class="container-fluid">...</div>

Answer 5

T J*_*T J 3

尝试申请class="row"要素<tr>。

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

-- Bootstrap CSS 文档

请注意，行必须放置在.container（固定宽度）或.container-fluid（全角）内才能正确对齐和填充，因此您可能需要申请class=container-fluid表或其父表。

添加 <td style ="word-break:break-all;> 似乎可以修复它 (5认同)

归档时间：	11 年，5 月前
查看次数：	66117 次
最近记录：	7 年，10 月前