网格和动态 Table 的高度

Question

我有一个 table 是使用 Javascript / jQuery 动态创建的。其逻辑如下：

$.each(input, function (key, value){

    let parent = $('<tr>');
    let container = $('<td>').text('Test');
    parent.append(container);
    table.append(parent);
 
});

在我开始动态创建 table 之前，当 table 的高度变得太大时，我能够让页眉和页脚保持在视图中，同时让 table 滚动。我用以下方法做到了这一点：

//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;
}

尽管现在有了动态 table，滚动时我的页眉和页脚都不会留在视图中。

为了尝试解决此问题，我尝试在加载页面后重置 CSS，但没有成功。如何创建 fixed/sticky 页眉和页脚同时保持 table 动态？

编辑：我正在寻找不需要为 table.

设置静态高度的解决方案

Answer 1

你能试试我下面的代码吗，你应该在渲染 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>

Answer 2

CSS唯一的解决方案

@Ajith 的回答很好，但我想分享我将要使用的解决方案。

注意如果您在将此解决方案与 MS Edge 一起使用时遇到问题，您的 Edge 版本可能需要更新。

首先，我意识到我的 table 周围没有 <div>。因此 overflow 将无法正常工作。所以我在 table 周围创建了一个名为 table-container 的元素。

其次，我们需要做的就是将 height : 100% 添加到我们的 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>

网格和动态 Table 的高度

Grid & Dynamic Table's Height

html

javascript

css

grid

jquery