Make tbody fixed height

2
votes

I have a table with filter on every column. When filter matches few records, my tfoot contents will jump up and down. So I want to set the tbody height to fixed value to let tfoot stay at the bottom.

I have seen similar questions like how to define minimum height for tbody in css,

but it does not solve my problem.

Setting height of wrapper div does not solve this. Setting tbody 'display: block' will make the columns width not aligned with thead any more.

Thanks.

1
css

1 Answers

2
votes

table { table-layout: fixed; } To control the height place divs inside of tds and adjust the height of the divs

This article is very comprehensive

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>