Menu
I am building a web app using Bootstrap 4 and running into some weird issues. I want to utilize Bootstrap's table-responsive class to allow horizontal scrolling of the tables on mobile devices. On desktop devices the table should take up 100% of the containing DIV's width.
As soon as I apply the .table-responsive class to my table, the table shrinks horizontally and no longer takes up 100% of the width. Any ideas?
Here is my markup:
<!DOCTYPE html> <html lang="en" class="mdl-js"> <head> <title></title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="application-name" content=""> <meta name="theme-color" content="#000000"> <link rel="stylesheet" href="/css/bundle.min.css"> </head> <body> <div class="container-fluid no-padding"> <div class="row"> <div class="col-md-12"> <table class="table table-responsive" id="Queue"> <thead> <tr> <th><span span="sr-only">Priority</span></th> <th>Origin</th> <th>Destination</th> <th>Mode</th> <th>Date</th> <th><span span="sr-only">Action</span></th> </tr> </thead> <tbody> <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d"> <td>0</td> <td>PHOENIX, AZ</td> <td>SAN DIEGO, CA</td> <td>DRIVING</td> <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td> <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td> </tr> <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;"> <td colspan="6" class="no-padding"></td> </tr> </tbody> </table> </div> </div> <br> </div> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="/js/bundle.min.js"></script> </body> </html> If I apply a 100% width to the .table-responsive class, it makes the table itself a 100% wide but the child elements (TBODY, TR, etc.) are still narrow.
865
Make sure you checked you have inserted enough data in table. Sometimes there is just not enough data to trigger 'table-responsive' property.
Table column width use the same layout as grids do; using col-[viewport]-[size] . Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example. Remember to set the <th> elements rather than the <td> elements so it sets the whole column.
Add . 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. That means it will always take a minimum width required to present its content.
The following WON'T WORK. It causes another issue. It will now do the 100% width but it won't be responsive on smaller devices:
.table-responsive { display: table; } All these answers introduced another problem by recommending display: table;. The only solution as of right now is to use it as a wrapper:
<div class="table-responsive"> <table class="table"> ... </table> </div> 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
