t_m27
Reputation: 133
Force table inside a table to fill remaining screen height
I have a table inside a table. I want the inside table to fill the remaining space down to the bottom of the screen. If there are too many rows in the table to all fit on the screen, I want the table to have a vertical scrollbar. The overall page should not have a vertical scrollbar.
I am able to add ids or classes to the elements, but the general HTML needs to stay the same if at all possible.
https://jsfiddle.net/4rv9htau/2/
A while ago I used height 100% and a fixed pixel value to account for extra height from other elements, but I want to avoid that so that I don't have to worry about changing it should the size of other elements change in the future.
html,
body,
table,
tbody,
tr {
height: 100%;
margin: 0;
}
.MainCell {
display: block;
}
table div:last-child {
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
html,
body {
background-color: red;
}
table {
background-color: blue;
}
table td div:first-child {
background-color: green;
}
table td div:last-child,
table table {
background-color: yellow;
}<table>
<tbody>
<tr>
<td class="MainCell">
<div>
<input type="submit" name="btnBack" value="Back" id="btnBack">
<input type="submit" name="btnDelete" value="Delete" id="btnDelete">
<input type="submit" name="btnCut" value="Cut" id="btnCut">
</div>
<div>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th>COL #1</th>
<th>COL #2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>Upvotes: 0
Views: 258
Answers (1)
user3589620
Reputation:
With the usage of vh.
<td>
<div>...</div><!-- First div -->
<div>...</div><!-- Second div -->
</td>
- Set a fixed height for the first div.
- The height of the second div:
calc(100vh - fixed height).
html,
body,
table,
tbody,
tr {
height: 100%;
margin: 0;
}
html,
body {
background-color: red;
}
table {
border-collapse: collapse;
}
.MainCell {
display: block;
padding: 0;
}
.MainCell>div:first-child {
/* Center the inputs inside the div horizontally and vertically with */
display: flex;
justify-content: center;
align-items: center;
height: 30px;
margin: 0;
padding: 0;
}
.MainCell>div:nth-child(2) {
max-height: calc(100vh - 30px);
}
table div:last-child {
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
}
table {
//background-color: blue;
}
table td div:first-child {
background-color: green;
}
table td div:last-child,
table table {
background-color: yellow;
}<table>
<tbody>
<tr>
<td class="MainCell">
<div>
<input type="submit" name="btnBack" value="Back" id="btnBack">
<input type="submit" name="btnDelete" value="Delete" id="btnDelete">
<input type="submit" name="btnCut" value="Cut" id="btnCut">
</div>
<div>
<table style="border-collapse:collapse;">
<thead>
<tr>
<th>COL #1</th>
<th>COL #2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
<tr>
<td>Some val #1</td>
<td>Some val #1</td>
</tr>
<tr>
<td>Some val #2</td>
<td>Some val #2</td>
</tr>
<tr>
<td>Some val #3</td>
<td>Some val #3</td>
</tr>
<tr>
<td>Some val #4</td>
<td>Some val #4</td>
</tr>
<tr>
<td>Some val #5</td>
<td>Some val #5</td>
</tr>
<tr>
<td>Some val #6</td>
<td>Some val #6</td>
</tr>
<tr>
<td>Some val #7</td>
<td>Some val #7</td>
</tr>
<tr>
<td>Some val #8</td>
<td>Some val #8</td>
</tr>
<tr>
<td>Some val #9</td>
<td>Some val #9</td>
</tr>
<tr>
<td>Some val #10</td>
<td>Some val #10</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>Edit
Set .MainCell { padding: 0 } and table { border-collapse: collapse} to prevent the vertical scrollbar on the overall page.
Upvotes: 1
Related Questions
- Make a div fill the height of the remaining screen space
- How to force a height on an html table?
- table with height 100% doesn't fit parent size
- How to make table fill parent div height but not exceed
- Table inside a div with max-height
- One table occupying available height of cell in other table
- How to keep a tables height contained within a parent div
- HTML tables in tables 100% height
- 100% Height with 2 Tables (1 inside other) and HTML5
- Get two divs to fill up remaining height