Menu
I have a table that is created dynamically using Javascript / jQuery. The logic of which can be seen below:
$.each(input, function (key, value){
let parent = $('<tr>');
let container = $('<td>').text('Test');
parent.append(container);
table.append(parent);
});
Before I began creating the table dynamically I was able to have both a header and footer remain in view while having the table scroll when its height became too large. I did this with the following:
//HTML
<body>
<div id="wrapper">
<div id="header"></div>
<table id="content"></table>
<div id="footer"></div>
</div>
</body>
//CSS
body {
margin: 0;
height: 100%;
}
#wrapper {
height: 100vh;
display: grid;
grid-template-rows: 56px 1fr 100px;
}
#content {
overflow-y: auto;
overflow-x: auto;
}
Although now, with the dynamic table, neither my header nor my footer will stay in view while scrolling.
To attempt to fix this I tried resetting the CSS once my page was loaded but this was unsuccessful. How can I created a fixed/sticky header & footer while still keeping my table dynamic?
Edit: I am looking for a solution that doesn't require setting a static height for the table.
515
/ɡrɪd/ a pattern of horizontal and vertical lines that cross each other to make a set of squares. A grid is also a system of wires through which electricity is connected to different parts of a region: a power grid.
The definition of a grid is a pattern of horizontal and vertical lines spaced out at regular intervals, forming squares or rectangles. The lines on graph paper are an example of a grid.
Four types of grid layouts can help you establish a well-balanced landing page. Use Block, Multicolumn, Modular, and Baseline grids to create a visual hierarchy on your page, and you are guaranteed to increase your conversions.
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With