Menu
I have a table like 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 is applied it auto widths to be 1400px or so. I have found for Twitter Bootstrap I need to apply width: auto !important for it to not be 100% width by default however my table still goes outside the parent container. I have tried to apply column widths using col-md-1 attributes but doesn't seem to make much difference
I have found if you apply table-layout:fixed to a table it will conform to a defined width.
My table is in a <div class="table-responsive"> so should I set a style for my table as width:90% to try and make it fit within the parent container?
I'm just wondering if there is a known solution to solve the problem of having a very wide table with Bootstrap fitting the parent container width?
Thanks
949
You can use one of the following classes to manipulate the width of the columns. Just add the . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column.
container-fluid class provides a full width container, spanning the entire width of the viewport.
Adding style to the <td> seemed to fix this
<td style ="word-break:break-all;">
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
