Check out this example I have for putting a table in a div and making it fill the div: ex1_jsfiddle
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
height: 100%;
table-layout: fixed;
}
td,
th {
border: 1px solid;
text-align: left;
padding: 0px 55px 0px 55px;
}
tr:nth-child(even) {
background-color: lightgreen;
}
tr {
margin-top: 0;
}
aside {
background-color: lightblue;
border: solid 2px;
position: absolute;
float: left;
height: 100%;
width: 15%;
}
#table_div {
float: left;
border: solid 2px;
margin-left: 25%;
height: 300px;
width: 700px;
border-color: red;
}<aside>sidebar</aside>
<div id="table_div">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>The issue arises when the table extends beyond the parent div. Strangely enough, indenting the elements within <div_id="table_div> and </div> by one tab seems to fix it, but only on jsfiddle: ex2_jsfiddle
In my browser (Chrome), however, this solution does not work.
I'm curious to understand why this discrepancy occurs. Can anyone provide some insight?