Grid & Dynamic Table's Height
CSS Only Solution
@Ajith's answer was good but I wanted to share the solution I will be using.
Notice If you have issues using this solution with MS Edge, your edge version may need to be updated.
First, I realized I had no <div>
surrounding my table. Therefore the overflow
would not work correctly. So I created an element around the table called table-container
.
Second, all we need to do is add height : 100%
to our table-container
CSS.
//HTML
<body>
<div id="wrapper">
<div id="header"></div>
<div id="table-container">
<table id="content"></table>
</div>
<div id="footer"></div>
</div>
</body>
//CSS
body {
margin: 0;
height: 100%;
}
#wrapper {
height: 100vh;
display: grid;
grid-template-rows: 56px 1fr 100px;
}
#table-container {
overflow-y: auto;
overflow-x: auto;
height: 100%;
}
var table = $("#content");
var input = [1,2,3,4,5,6,7,8,9,10,11,12];
$.each(input, function (key, value){
let parent = $('<tr>');
let container = $('<td>').text('Test');
parent.append(container);
table.append(parent);
});
var addRow = function(){
let parent = $('<tr>');
let container = $('<td>').text('Test');
parent.append(container);
table.append(parent);
}
body {
margin: 0;
height: 100%;
}
#wrapper {
height: 100vh;
display: grid;
grid-template-rows: 30px 1fr 30px;
}
#table-container {
overflow-y: auto;
overflow-x: auto;
height: 100%;
}
#header, #footer{
border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<div id="header">
<button onclick="addRow()">Add Data</button>
</div>
<div id="table-container">
<table id="content"></table>
</div>
<div id="footer"></div>
</div>
</body>
Can you try my below code , You should set height after rendering the innerhtml
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Code</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" language="javascript"></script>
<style>
//CSS
body {
margin: 0;
height: 100%;
}
#wrapper {
height: 100vh;
display: grid;
grid-template-rows: 56px 1fr 100px;
}
.fixed{height::100px;
overflow:scroll;}
#content {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<table id="content" width="150px" border="1">
<thead>
<tr><th>Head</th></tr>
</thead>
<tbody>
<tr>
<td>
<div class="fixed">
<table id="mybody"></table>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr><th>Foot</th></tr>
</tfoot>
</table>
<div id="footer"></div>
</div>
</body>
<script>
const arr=[ 1, 2, 3, 5, 6, 7, 10, 12, 17, 18];
jQuery(document).ready(function($) {
var table = $("#mybody");
$.each(arr, function (key, value){
let parent = $('<tr>');
let container = $('<td>').text('Test');
parent.append(container);
table.append(parent);
});
setTimeout(function(){
table.parent().css({"height":"100px"});
},100);
});
</script>
</html>