Grid & Dynamic Table's Height

Question

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.

[Does this help](https://stackoverflow.com/questions/61549116/js-table-generator-with-buttons) to answer your question? — Hello, Jul 31 '20 at 15:03
@Ajith Sorry but I dont see how that is relevant to the question. Its simply an associative array. — Newb 4 You BB, Jul 31 '20 at 15:15
@Newb4YouBB no issues. Just one question , So you need table height to be fixed for example total height is 100 px Head and footer10px then no matter what the content in table body grows, height of body should be 80 px eith scroll isnt it? — Ajith, Jul 31 '20 at 15:20

Ajith · Answer 1 · 2020-07-31T15:38:10.103

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>

Thank you for your answer. Unfortunately I am hoping for a solution that doesn't require setting a static height for the table. — Newb 4 You BB, Jul 31 '20 at 15:37
thank you again for your answer. While it wasnt the solution I ended up choosing, it did help me discover my solution. — Newb 4 You BB, Jul 31 '20 at 16:13

Newb 4 You BB · Accepted Answer · 2020-08-01T09:21:25.417

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>

Grid & Dynamic Table's Height

2 Answers2