使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>