html – 制作宽桌子适合bootstrap容器

html – 制作宽桌子适合bootstrap容器,第1张

概述我有一张这样的桌子 <!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"> <t 我有一张这样的桌子
<!DOCTYPE HTML><HTML xmlns="http://www.w3.org/1999/xhtml"><head>    <Title></Title></head><body><div ><div >  <div >    <table >        <thead>            <tr>                 <th >ID</th>                 <th >Enabled</th>                 <th >Shortcode</th>                 <th >Keyword</th>                 <th >Session Based</th>                 <th >Application SMS Endpoint</th>                 <th >Application MMS Endpoint</th>                 <th >Date From</th>                 <th >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!重要的是它不是100%的宽度,默认情况下,我的表仍然在父容器之外。我试图使用col-md-1属性应用列宽度,但似乎没有太大的区别

我发现如果你应用table-layout:固定到一个表,它将符合一个定义的宽度。

我的表格是< div class =“table-responsive”>所以我应该为我的表格设置一个宽度:90%的样式,使其适合父容器?

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

谢谢

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

< td style =“word-break:break-all;”>

总结

以上是内存溢出为你收集整理的html – 制作宽桌子适合bootstrap容器全部内容,希望文章能够帮你解决html – 制作宽桌子适合bootstrap容器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1113125.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存