javascript - 没有指定宽度的表格的 CSS 固定标题

Question

我已经搜索了很多次以找到正确的解决方案，当我们向下滚动正文 (tbody) 部分时，使表头 (thead) 保持不变。有那么多解决方案，但对我没有任何帮助。

一些尝试过的链接:

• > How to make Scrollable Table with fixed headers using CSS
• > https://jsfiddle.net/dPixie/byB9d/3/
• > http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm

大多数链接都为每个 tr td 使用固定宽度，但我需要它而不指定元素的任何宽度，因为表格是动态生成的。标题和内容可长可短，因此宽度取决于内容。

有任何其他解决方案来正确对齐 th 和 td 吗？

.fixed_headers {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed_headers thead tr {
  display: block;
  position: relative;
}

.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  max-height: 200px;
}

<table class="fixed_headers" border="1" cellpadding="5" cellspacing="0">
  <thead>
    <tr>
      <th>Lorem Ipsums</th>
      <th>ipsum dolor sit amet</th>
      <th>consectetur adipiscing</th>
      <th>do eiusmod tempor incididunt</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>quis nostrum exercitationem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
    </tr>
    <tr>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>quis nostrum exercitationem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
    </tr>
    <tr>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
    <tr>
      <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
      <td>accusantium doloremque laudantium</td>
      <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      <td>quis nostrum exercitationem</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以使用 position:sticky 固定 header ，这样

• 将 table 包裹在 relative div 中，其高度要固定。
• 将“th”指定为sticky。因为 sticky 仅适用于表内的 th 和 td
• 为第 th 提供背景颜色，否则它将显示为透明。
• 在 th 上指定的 CSS 边框将在标题固定在顶部后消失(出于某种原因我不知道)。

.fixed-headers {
  width: 100%;
  position: relative;
  overflow-y: scroll;
  height: 300px;
}

.fixed-headers table {
  table-layout: fixed;
  width: 100%;
}

.fixed-headers thead tr th {
  position: sticky;
  top: 0px;
  background-color: white;
}

<div class="fixed-headers">
  <table border="1" cellpadding="5" cellspacing="0">
    <thead>
      <tr>
        <th>Lorem Ipsums</th>
        <th>ipsum dolor sit amet</th>
        <th>consectetur adipiscing</th>
        <th>do eiusmod tempor incididunt</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>quis nostrum exercitationem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
      <tr>
        <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</td>
        <td>accusantium doloremque laudantium</td>
        <td>consequuntur magni dolores eos qui ratione voluptatem</td>
        <td>quis nostrum exercitationem</td>
      </tr>
    </tbody>
  </table>
</div>