如何创建固定位置表尾？

<table id="myTable">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <!-- 其他数据行 -->
  </tbody>
</table>

#myTable {
  width: 100%;
  border-collapse: collapse;
}

#myTable thead {
  background-color: #f5f5f5;
}

#myTable th, #myTable td {
  padding: 8px;
  border: 1px solid #ddd;
}

#myTable tfoot {
  position: fixed;
  bottom: 0;
  background-color: #f5f5f5;
}

window.addEventListener('load', function() {
  var table = document.getElementById('myTable');
  var theadHeight = table.querySelector('thead').offsetHeight;
  var tfoot = table.querySelector('tfoot');
  tfoot.style.height = theadHeight + 'px';
});