html - Making wide table fit bootstrap container -
i have table so:
<!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> when no css applied auto widths 1400px or so. have found twitter bootstrap need apply width: auto !important not 100% width default table still goes outside parent container. have tried apply column widths using col-md-1 attributes doesn't seem make difference
i have found if apply table-layout:fixed table conform defined width.
my table in <div class="table-responsive"> should set style table width:90% try , make fit within parent container?
i'm wondering if there known solution solve problem of having wide table bootstrap fitting parent container width?
thanks
adding style <td> seemed fix this
<td style ="word-break:break-all;">
Comments
Post a Comment