如何在IE11中实现HTML表的粘性标题？

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

.table-container {
  position: relative;
  overflow: auto;
  height: 300px; /* 设置表格容器的高度 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #f2f2f2;
}

// 检测浏览器是否支持sticky属性
if (!CSS.supports('position', 'sticky')) {
  // 添加polyfill
  var thElements = document.querySelectorAll('.table-container th');
  Array.prototype.forEach.call(thElements, function(th) {
    th.classList.add('sticky-header');
  });
}