Responsive table makes layout go beyond 100% width - html

Question

Demo: http://codepen.io/anon/pen/JdWrKX?editors=110
As you can see there is a responsive table inside ".panel" which you can scroll horizontally. Great.
But it makes the entire page expand horizontally and not fit in the window.
Try on small screens to see the bug.
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>
Logout
</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>
Logout
</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 child elements of .content seems to be ignoring % width values, the work around that worked for me was:
.content > * {
width: 100vw;
}
I also added the class .table to your table element
<table class="table table-bordered">
Here is a Demo
NOTE: The vw unit only works in modern browsers. Check support here

Answer 2

Change the table code like this:
<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 remove this from your css file
td div {
width: 900px;
}

Answer 3

Try editing the width of your td's child div like this
td div {
width: auto;
}
I hope it helps fixing the bug.

Answer 4

If the window size is less or equal to 900px the td content will go beyond that. You should not fix the td div size in px. Use instead % (percentage).
td div
{
width: 100%;
}

Answer 5

The problem is that tables are by nature not responsive. You have resorted to using display table, table-row, and table-cell which are expanding beyond the veiwport with the content, and creating your undesired effects.
As you can see in this fiddle: if you remove the table elements, your width issue goes away, but then you don't get the sticky footer you're looking for.
changing 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 responsive width, as well as a full height webpage with sticky footer.