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>

Grid & Dynamic Table's Height

Tags:

Javascript

Html

Css

Jquery

Grid

Related

Recent Posts