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

HTML 前端之家
前端之家收集整理的这篇文章主要介绍了html – 制作宽桌子适合bootstrap容器，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一张这样的桌子 
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7. <div class="container">
  8. <div class="panel-body">
  9.   <div class="table-responsive">
  10.     <table class="table table-bordered table-hover table-striped">
  11.         <thead>
  12.             <tr>
  13.                  <th class="col-md-1">Id</th>
  14.                  <th class="col-md-1">Enabled</th>
  15.                  <th class="col-md-1">Shortcode</th>
  16.                  <th class="col-md-1">Keyword</th>
  17.                  <th class="col-md-1">Session Based</th>
  18.                  <th class="col-md-1">Application SMS Endpoint</th>
  19.                  <th class="col-md-2">Application MMS Endpoint</th>
  20.                  <th class="col-md-2">Date From</th>
  21.                  <th class="col-md-2">Date To</th>
  22.             </tr>
  23.         </thead>
  24.         <tbody>
  25.             <tr>
  26.                 <td>1502</td>
  27.                 <td>True</td>
  28.                 <td>+44123456789</td>
  29.                 <td>*</td>
  30.                 <td>False</td>
  31.                 <td>http://google.com/sms</td>
  32.                 <td>NOTUSED</td>
  33.                 <td>10 March 2014 19:04:15</td>
  34.                 <td>01 January 2100 00:00:00</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>1212</td>
  38.                 <td>True</td>
  39.                 <td>+44123456789</td>
  40.                 <td>*</td>
  41.                 <td>False</td>
  42.                 <td>http://somewhere.local:8080/</td>
  43.                 <td>NOTUSED</td>
  44.                 <td>06 March 2014 14:00:12</td>
  45.                 <td>04 March 2034 15:20:05</td>
  46.             </tr>
  47.             <tr>
  48.                 <td>1023</td>
  49.                 <td>True</td>
  50.                 <td>+44123456789</td>
  51.                 <td>*</td>
  52.                 <td>False</td>
  53.                 <td>http://www.google.com/sms</td>
  54.                 <td>NOTUSED</td>
  55.                 <td>26 February 2014 16:35:52</td>
  56.                 <td>01 January 2100 00:00:00</td>
  57.             </tr>
  58.             <tr>
  59.                 <td>1464</td>
  60.                 <td>True</td>
  61.                 <td>+44123456789</td>
  62.                 <td>00LONG</td>
  63.                 <td>False</td>
  64.                 <td>http://ggole.com</td>
  65.                 <td>NOTUSED</td>
  66.                 <td>10 March 2014 07:19:19</td>
  67.                 <td>10 March 2034 07:19:19</td>
  68.             </tr>
  69.             <tr>
  70.                 <td>1450</td>
  71.                 <td>True</td>
  72.                 <td>+44123456789</td>
  73.                 <td>10</td>
  74.                 <td>False</td>
  75.                 <td>http://ggole.com</td>
  76.                 <td>NOTUSED</td>
  77.                 <td>10 March 2014 04:25:29</td>
  78.                 <td>10 March 2034 04:25:29</td>
  79.             </tr>
  80.             <tr>
  81.                 <td>1384</td>
  82.                 <td>True</td>
  83.                 <td>+44123456789</td>
  84.                 <td>7</td>
  85.                 <td>False</td>
  86.                 <td>http://ggole.com</td>
  87.                 <td>NOTUSED</td>
  88.                 <td>07 March 2014 04:25:40</td>
  89.                 <td>07 March 2034 04:25:40</td>
  90.             </tr>
  91.             <tr>
  92.                 <td>1397</td>
  93.                 <td>True</td>
  94.                 <td>+44123456789</td>
  95.                 <td>AB</td>
  96.                 <td>False</td>
  97.                 <td>http://ggole.com</td>
  98.                 <td>NOTUSED</td>
  99.                 <td>07 March 2014 08:39:20</td>
  100.                 <td>07 March 2034 08:39:20</td>
  101.             </tr>
  102.             <tr>
  103.                 <td>1393</td>
  104.                 <td>True</td>
  105.                 <td>+44123456789</td>
  106.                 <td>ABRANTEE</td>
  107.                 <td>False</td>
  108.                 <td>http://ggole.com</td>
  109.                 <td>NOTUSED</td>
  110.                 <td>07 March 2014 06:59:16</td>
  111.                 <td>07 March 2034 06:59:16</td>
  112.             </tr>
  113.             <tr>
  114.                 <td>1446</td>
  115.                 <td>True</td>
  116.                 <td>+44123456789</td>
  117.                 <td>BREAKFAST</td>
  118.                 <td>False</td>
  119.                 <td>http://ggole.com</td>
  120.                 <td>NOTUSED</td>
  121.                 <td>08 March 2014 12:03:46</td>
  122.                 <td>08 March 2034 12:03:46</td>
  123.             </tr>
  124.             <tr>
  125.                 <td>1514</td>
  126.                 <td>True</td>
  127.                 <td>+44123456789</td>
  128.                 <td>CAMPAIGN</td>
  129.                 <td>False</td>
  130.                 <td>http://ggole.com</td>
  131.                 <td>NOTUSED</td>
  132.                 <td>11 March 2014 04:31:50</td>
  133.                 <td>11 March 2034 04:31:50</td>
  134.             </tr>
  135.             <tr>
  136.                 <td>1515</td>
  137.                 <td>True</td>
  138.                 <td>+44123456789</td>
  139.                 <td>CAMPAIGN1</td>
  140.                 <td>False</td>
  141.                 <td>http://ggole.com</td>
  142.                 <td>NOTUSED</td>
  143.                 <td>11 March 2014 04:47:27</td>
  144.                 <td>11 March 2034 04:47:27</td>
  145.             </tr>
  146.             <tr>
  147.                 <td>1472</td>
  148.                 <td>True</td>
  149.                 <td>+44123456789</td>
  150.                 <td>D</td>
  151.                 <td>False</td>
  152.                 <td>http://ggole.com</td>
  153.                 <td>NOTUSED</td>
  154.                 <td>10 March 2014 08:26:27</td>
  155.                 <td>10 March 2034 08:26:27</td>
  156.             </tr>
  157.             <tr>
  158.                 <td>1410</td>
  159.                 <td>True</td>
  160.                 <td>+44123456789</td>
  161.                 <td>GJGJTY</td>
  162.                 <td>False</td>
  163.                 <td>http://ggole.com</td>
  164.                 <td>NOTUSED</td>
  165.                 <td>07 March 2014 10:00:34</td>
  166.                 <td>07 March 2034 10:00:34</td>
  167.             </tr>
  168.             <tr>
  169.                 <td>1390</td>
  170.                 <td>True</td>
  171.                 <td>+44123456789</td>
  172.                 <td>JYJYTJY</td>
  173.                 <td>False</td>
  174.                 <td>http://ggole.com</td>
  175.                 <td>NOTUSED</td>
  176.                 <td>07 March 2014 05:19:42</td>
  177.                 <td>07 March 2034 05:19:42</td>
  178.             </tr>
  179.             <tr>
  180.                 <td>1322</td>
  181.                 <td>True</td>
  182.                 <td>+44123456789</td>
  183.                 <td>LONGCODE</td>
  184.                 <td>False</td>
  185.                 <td>http://ggole.com</td>
  186.                 <td>NOTUSED</td>
  187.                 <td>06 March 2014 09:28:39</td>
  188.                 <td>06 March 2034 09:28:39</td>
  189.             </tr>
  190.             <tr>
  191.                 <td>1471</td>
  192.                 <td>True</td>
  193.                 <td>+44123456789</td>
  194.                 <td>LONGCODETHIRTYCAHRACTERKEYWORD</td>
  195.                 <td>False</td>
  196.                 <td>http://ggole.com</td>
  197.                 <td>NOTUSED</td>
  198.                 <td>10 March 2014 08:26:27</td>
  199.                 <td>10 March 2034 08:26:27</td>
  200.             </tr>
  201.             <tr>
  202.                 <td>1319</td>
  203.                 <td>True</td>
  204.                 <td>+44123456789</td>
  205.                 <td>MARV</td>
  206.                 <td>False</td>
  207.                 <td>http://ggole.com</td>
  208.                 <td>NOTUSED</td>
  209.                 <td>06 March 2014 08:46:53</td>
  210.                 <td>06 March 2034 08:46:53</td>
  211.             </tr>
  212.             <tr>
  213.                 <td>1503</td>
  214.                 <td>True</td>
  215.                 <td>+44123456789</td>
  216.                 <td>MUM</td>
  217.                 <td>False</td>
  218.                 <td>http://www.ff.com/sms</td>
  219.                 <td>NOTUSED</td>
  220.                 <td>10 March 2014 19:16:52</td>
  221.                 <td>17 March 2014 19:16:52</td>
  222.             </tr>
  223.             <tr>
  224.                 <td>1447</td>
  225.                 <td>True</td>
  226.                 <td>+44123456789</td>
  227.                 <td>R</td>
  228.                 <td>False</td>
  229.                 <td>http://ggole.com</td>
  230.                 <td>NOTUSED</td>
  231.                 <td>08 March 2014 12:03:46</td>
  232.                 <td>08 March 2034 12:03:46</td>
  233.             </tr>
  234.             <tr>
  235.                 <td>1281</td>
  236.                 <td>True</td>
  237.                 <td>+44123456789</td>
  238.                 <td>S2</td>
  239.                 <td>False</td>
  240.                 <td>http://ggole.com</td>
  241.                 <td>NOTUSED</td>
  242.                 <td>06 March 2014 05:31:51</td>
  243.                 <td>06 March 2034 05:31:51</td>
  244.             </tr>
  245.         </tbody>
  246.     </table>
  247.    </div>
  248. </div>
  249. </div>
  250. </body>
  251. </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相关文章

elasticsearch扩展ik分词器词库
操作步骤 1、进入elasticsearch的plugin，进入ik。进入config。 2、在config下面建立以.di...
echarts中legend如何换行
lengend data数据中若存在&#39;&#39;，则表示换行，用&#39;&#39;切割。
Echart常用效果（一）
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { t...
freemarker中js里面取字符串，换行导致报错的解决办法
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var d...
Freemarker + xml 实现Java导出word
前言 最近做了一个调查问卷导出的功能，需求是将维护的题目，答案，导出成word，参考了几种...
【前端JSP思考】JSP中#{},${}和%{}的区别
JSP中#{},${}和%{}的区别： # #{}：对语句进行预编译，此语句解析的是占位符?，可以防止SQ...
【前端HTML】常用标签及属性
对于很多人来说，用HTML标签都是熟能生巧，而不清楚为什么是那样的标签，所以我在这列了一...
[前端]GOFLY项目-响应式登录页的设计和实现
登录界面如果要实现响应式 , 需要注意宽度的设置和media query的使用 宽度一般都是按百分比...
[前端] 设定为disabled的表单域值不能被提交
表单中的某个表单域被设定为disabled，则该表单域的值就不会被提交。 但是我们需要提交这个...
[前端] 代码中执行绑定元素的指定事件trigger方法
前面业务里有个搜索功能 , 入口比较深 , 现在想要把入口挪到有公共header的地方 , 在不想完...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作