Question

我在每列都有一个带过滤器的表。当过滤器匹配少量记录时，我的tfoot内容将上下跳跃。所以我想将tbody高度设置为固定值让tfoot保持在底部。

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

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

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

感谢。

Answer 1

table { table-layout: fixed; }控制tds内部的高度位置div并调整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>

使tbody固定高度

1 个答案: