Menu
I'm writing a web site using bootstrap (3.3.2) with a simple table on one of the pages. I just have a simple header panel in one container, and another content container with a title and table. For some reason, text fills the width of the container, but the table left aligns and only spans the width required by the text within. Anyone have any ideas? I know I can add in a width="100%" to the table, but this should be default bootstrap behaviour...
Cheers
<html> <head> <title>Page title</title> <link type="text/css" rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div class="navbar navbar-inverse navbar-static-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">Home</a> </div> <div id="navbar" class="navbar-collapse collapse" > <ul class="nav navbar-nav"> <li><a class="navbar-brand" href="modules.html">Modules</a></li> <li><a class="navbar-brand" href="sites.html">Sites</a></li> <li><a class="navbar-brand" href="search.html">Search</a></li> </ul> </div> </div> </div> <div class="container"> <div class="page-header"> <h2>Why won't the table align!?</h2> </div> <div class="table-responsive"> <table> <thead> <th>Head1</th><th>Head2</th><th>Head3</th> </thead> <tbody> <tr> <td>Body1</td><td>Body2</td><td>Body3</td> </tr> <tr> <td>Body1</td><td>Body2</td><td>Body3</td> </tr> <tr> <td>Body1</td><td>Body2</td><td>Body3</td> </tr> </tbody> </table> </div> </div> </body> </html> 
283
Make sure you checked you have inserted enough data in table. Sometimes there is just not enough data to trigger 'table-responsive' property.
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.
It's because you are not following the Bootstrap documentation indications on responsive tables. You have to wrap your table element with .table class in a wrapper <div> with the .table-responsive class, like this:
<div class="table-responsive"> <table class="table"> ... </table> </div> NOTE: If you're using bootstrap v4 alpha, even though the documentation says that you can use:
<table class="table table-responsive"> ... </table> I still had to use the accepted answer to make it fill the container's width:
<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
