Rich S
Reputation: 3453
Prevent HTML table from overflowing the containing div
My objective is to have a layout that has a fixed area at the top, then a table (with scrollbars) in the remaining available area. I've simplified this for the benefit of asking this question.
I've tried to do this by having a div of a specific size (in this example 300x300 pixels) shown in the example as cyan, this contains a table with two rows, the top one containing the header, then the second one containing a div, which in turn contains the table with the data I want to scroll through.
table {border-collapse: collapse;}
table,th,td {border: 1px solid gray;}
table.nowrap {white-space: nowrap;}<html>
<body>
<div style="width:300px; height:300px; background-color: cyan;">
<table>
<tr style="height:40px;background-color: lightblue;">
<td>This is the static header</td>
</tr>
<tr>
<td>
<div style='width:100%; height:100%; overflow:scroll;'>
<table class='nowrap'>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
<tr><td>An item in the table</td><td>An item in the table</td><td>An item in the table</td></tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>If you run this, it shows the following, but I don't understand why. The height/width are 100%, so shouldn't it inherit the size from the parent?
If I change the line
<div style='width:100%; height:100%; overflow:scroll;'>
to
<div style='width:300px; height:260px; overflow:scroll;'>
Then it displays the scrollable table within the div.. which is correct (or at least what I want). But I won't know the exact size, as the screen is built dynamically, and on different browsers etc.
So, if I specify the exact width of the div (within the td) rather than a percentage, it works fine - could it be picking up the size from another parent rather than the outer div?
Upvotes: 2
Views: 1483
Answers (1)
Mendrika Sandratra
Reputation: 535
There is many better ways than using table to do this but i will fit to your method.
This is the whole html code that will get the wanted result (Just read the comments to see the changes):
<html>
<head>
<title>Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid gray;
}
table.nowrap {
white-space: nowrap;
}
</style>
</head>
<body>
<!-- Added position:relative to the div -->
<div style="width:300px;position: relative;height:300px;background-color: cyan;">
<!-- Change the table position to absolute and make its width and height 100% of the parent's -->
<table style="position: absolute;width: 100%;height: 100%;">
<tbody>
<tr style="height:40px;background-color: lightblue;">
<td>This is the static header</td>
</tr>
<tr>
<!-- Added position:relative to the cell so the div will fit to it -->
<td style="position: relative;">
<!-- Make the div position absolute and position it to the top of the cell -->
<div style="position: absolute;top: 0;width:100%;height:100%;overflow:auto;">
<!--Set width and height to 100% so it will always fill the div-->
<table class="nowrap" style="width:100%;height:100%">
<tbody>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
<tr>
<td>An item in the table</td>
<td>An item in the table</td>
<td>An item in the table</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Upvotes: 3
Related Questions
- Table overflowing outside of div
- CSS: Overflowing HTML table
- Table inside div overflowing
- Avoid HTML table overflow
- Table in a div overflow
- HTML Table Overflow Into Adjacent Div
- prevent div inside of table from expanding beyond parent's size
- overflowed table inside div
- Table overflowing containing div in HTML
- Prevent table from expanding beyond parent