Adaptive table makes layout above 100% of width

Question

Demo: http://codepen.io/anon/pen/JdWrKX?editors=110

As you can see, inside the ".panel" there is a flexible table that you can scroll horizontally. Excellent.

But it makes the whole page expand horizontally and does not fit into the window. Try on small screens to see the error.

HTML:

<div id="wrap"> <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="">Logo</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <a href="">Logout</a> </li> </ul> </div> </div> </nav> <div class="content content-primary content-sm"> <div class="container-fluid"> <div class="row"> <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <div class="panel panel-default"> <div class="panel-body"> <div class="table-responsive"> <table class="table-bordered"> <tr> <td> <div>a</div> </td> <td>b</td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> <footer> <nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="">Copyright</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <a href="">Logout</a> </li> </ul> </div> </div> </nav> </footer> </div> 

CSS

 html, body { height: 100%; } #wrap { height: 100%; display: table; width: 100%; } #wrap > nav, footer { display: table-row; } nav.navbar { margin-bottom: 0; } .content-sm { padding: 15px 0; } .content-primary { background: #337ab7; } .content { display: table-cell; height: 100%; } td { text-wrap: no-warp; } td div { width: 900px; } 

Answer 1

Since the .content seem to ignore the% widths, the work that worked for me was:

 .content > * { width: 100vw; } 

I also added the .table class to the table element

 <table class="table table-bordered"> 

Here is a demo

NOTE. The vw block only works in modern browsers. Check out the support here

Answer 2

Change the table code as follows:

 <div class="content content-primary content-sm"> <div class="container-fluid"> <div class="row"> <div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <div class="panel panel-default"> <div class="panel-body"> <table class="table table-responsive table-bordered"> <tr> <td> <div>a</div> </td> <td>b</td> </tr> </table> </div> </div> </div> </div> </div> </div> 

and delete this from your css file

 td div { width: 900px; } 

Answer 3

The problem is that table is not inherently responsive. You used display table , table-row and table-cell , which expand beyond the content with the content and create unwanted effects.

As you can see in this fiddle : if you remove the table elements, the width issue will disappear, but then you won't get the sticky footer you are looking for.

change your CSS to:

 html, body { height: 100%; } #wrap { min-height: 100%; background: #337ab7; } .page-wrap:after { content: ""; display: block; height: 51px; } nav.navbar { margin-bottom: 0; } .content-sm { padding: 15px 0; } .box-content { width: 9000px; height: 5000px; background: red; } .box-responsive { width: 100%; max-width: 100%; overflow-x: scroll; border: 1px solid green; } 

You will get your desired flexible width as well as a full height web page with a sticky footer.

Answer 4

Try changing the width of your child div td as follows

 td div { width: auto; } 

I hope this helps to fix the error.

Answer 5

If the window size is less than or equal to 900px, the contents of td will be beyond this. You should not fix the size of the td div in px. Use% (percent) instead.

 td div { width: 100%; }