使tbody固定高度

Question

我有一张表，每列都有过滤器。当过滤器匹配很少的记录时，我的tfoot内容将会上下跳动。所以我想将tbody的高度设置为固定值，让tfoot留在底部。

我见过像how to define minimum height for tbody in css类似的问题，

，但它并没有解决我的问题。

包装div的设置高度不能解决这个问题。设置tbody'display：block'将使列宽不再与ad对齐。

谢谢。

Answer 1

table { table-layout: fixed; }要控制高度处的div TDS的内部调整的div的高度

这article非常全面

var mid = document.querySelector('.center'); 
 
var up = document.getElementById('up'); 
 

 
up.addEventListener('click', function(e) { 
 
    mid.style.height = "200px"; 
 
}, false);

table { 
 
    table-layout: fixed; 
 
    border: 3px solid blue; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 90%; 
 
} 
 
th { 
 
    border: 1px dashed green; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
} 
 
div { 
 
    border: 1px dashed red; 
 
    min-height: 50px; 
 
} 
 
.center { 
 
    width: 100%; 
 
    height: 100px; 
 
    min-height: 100px; 
 
    max-height: 200px; 
 
}

<button id="up">UP</button> 
 

 

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th> 
 
     <div></div> 
 
     </th> 
 
     <th> 
 
     <div></div> 
 
     </th> 
 
     <th> 
 
     <div></div> 
 
     </th> 
 
    </tr> 
 
    <thead> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <div></div> 
 
      </td> 
 
      <td> 
 
      <div></div> 
 
      </td> 
 
      <td> 
 
      <div></div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <div></div> 
 
      </td> 
 
      <td> 
 
      <div class="center"></div> 
 
      </td> 
 
      <td> 
 
      <div></div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <div></div> 
 
      </td> 
 
      <td> 
 
      <div></div> 
 
      </td> 
 
      <td> 
 
      <div></div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
</table>