时间戳

首页 > 解决方案 > 如何在 IE11 中为 HTML 表格实现粘性标题？

javascript - 如何在 IE11 中为 HTML 表格实现粘性标题？

问题描述

我正在为仍在使用 Internet Explorer 11 的客户端使用 HTML、Bootstrap、CSS 和 JS（以及 jQuery）构建一个表格。我找不到在 IE 中使其标题保持粘性的方法。

我目前正在使用position: sticky;，它适用于所有三种主要浏览器（Edge、Chrome 和 Firefox）。我知道 IE 不支持它。下面是我桌子的照片。它在标头中有标头，使用rowspan. 我尝试了不同的 polyfills 和解决方案，但它们要么破坏了某些东西，要么就是不起作用。

桌子本身

这是我用于表格的 HTML 和 CSS。

tr>th {
  text-align: center;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.tr1>th {
  position: sticky;
  top: 0;
  box-shadow: 1px 0px 0px 0px #212529;
}

.tr2>th {
  position: sticky;
  top: 93px;
  box-shadow: 1px 0px 0px 0px #212529;
}

thead {
  position: sticky;
  top: 0;
}

tr>td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.add-btn {
  font-size: 11px;
}

input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* background-color: red; */
}

.no-padding td {
  padding: 0.25rem;
}

.no-padding td input {
  margin: 0;
  padding: 0.4rem;
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

  <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
  <script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="outer" style="overflow-x:auto; height: 600px">
    <table id="clockings-table" class="table table-bordered">
      <thead class="thead-dark">
        <tr class="tr1">
          <th rowspan="2" class="locked">dummy1</th>
          <th rowspan="2">dummy1</th>
          <th rowspan="2">dummy1</th>
          <th rowspan="2">dummy1</th>
          <th class="dummy" colspan="2">dummy1 <button id="add" type="button" class="btn btn-sm btn-primary">Add</button></th>
          <th class="dummy" colspan="5">dummy1</th>
          <th class="dummy" colspan="5">dummy1 <button id="add" data-toggle="modal" data-target="#exampleModal" data-whatever="dummy" type="button" class="btn btn-sm btn-primary">Add</button></th>

          <th class="dummy" colspan="5">dummy1 <button id="add" data-toggle="modal" data-target="#exampleModal" data-whatever="dummy" type="button" class="btn btn-sm btn-primary">Add</button></th>
          <th rowspan="2">dummy1</th>
          <th rowspan="2">dummy1</th>
        </tr>

        <tr class="tr2">
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>

          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>

          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>

          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
        </tr>
      </thead>

      <tbody>
      </tbody>
    </table>
  </div>
</body>

这样做的最佳方法是什么？我应该尝试用 JavaScript 编写脚本吗？这是我错过的一个简单的 HTML/CSS 技巧吗？很高兴看到你的想法。

标签： javascripthtmljquerycssbootstrap-4

解决方案

所以你希望你的标题在滚动表格时保持在原位。

为什么不固定您max-height的tbody表格并添加overflow-y: auto？

这是一个例子：

// Ignore this, this is just to fill the table with dummy data for the purspose of making an example

$(document).ready(() => {
  const dummy_data = new Array(10).fill(null).map(e => `<tr><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td><td>dummy</td></tr>`);
  
  $('#clockings-table tbody').append(dummy_data)
})
tr>th {
  text-align: center;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}


tr>td {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.add-btn {
  font-size: 11px;
}

input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* background-color: red; */
}

/* Table css */
table tbody {
  display: block;
  height: 100px;
  overflow: overlay;
}

table tbody tr{
  width: 100%;
}

thead, tbody tr {
  display:table;
  table-layout:fixed;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

  <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
  <script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<div class="outer">
    <table id="clockings-table" class="table table-bordered">
      <thead class="thead-dark">
        <tr class="tr1">
          <th rowspan="2" class="locked">dummy1</th>
          <th rowspan="2">dummy1</th>
          <th rowspan="2">dummy1</th>
          <th rowspan="2">dummy1</th>
          <th class="dummy" colspan="2">dummy1 <button id="add" type="button" class="btn btn-sm btn-primary">Add</button></th>
          <th class="dummy" colspan="5">dummy1</th>
          <th class="dummy" colspan="5">dummy1 <button id="add" data-toggle="modal" data-target="#exampleModal" data-whatever="dummy" type="button" class="btn btn-sm btn-primary">Add</button></th>

          <th class="dummy" colspan="5">dummy1 <button id="add" data-toggle="modal" data-target="#exampleModal" data-whatever="dummy" type="button" class="btn btn-sm btn-primary">Add</button></th>
          <th rowspan="2">dummy1</th>
          <th rowspan="2">dummy1</th>
        </tr>

        <tr class="tr2">
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>

          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>

          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>

          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
          <th class="dummy">dummy1</th>
        </tr>
      </thead>

      <tbody>
      </tbody>
    </table>
  </div>

推荐阅读