jquery - 使用 CSS 设置 <thead> 以占用 <table> 的整个宽度

Question

我有一个表格，我正在尝试通过 CSS 使其成为一个粘性标题。

#name-list {
  width: 100%;
}

td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #CCCCCC;
  font-family: Arial;
  font-size: 12px;
}

thead > tr > td {
  font-weight: bold;
  background-color: #DDDDDD;
}

tbody > tr > td {
  width: 50%;
}

<table id="name-list">
  <thead>
    <tr>
      <td>First Name</td>
      <td>Last Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Janet</td>
      <td>Wonder</td>
    </tr>
    <tr>
      <td>Aaron</td>
      <td>Main</td>
    </tr>
    <tr>
      <td>Allan</td>
      <td>Bul</td>
    </tr>
    <tr>
      <td>Carey</td>
      <td>Jay</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>Mkl</td>
    </tr>
    <tr>
      <td>Mel</td>
      <td>Jane</td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>King</td>
    </tr>
    <tr>
      <td>Jem</td>
      <td>Winfred</td>
    </tr>
    <tr>
      <td>Jaine</td>
      <td>Kim</td>
    </tr>
    <tr>
      <td>Kim</td>
      <td>Joo</td>
    </tr>
    <tr>
      <td>Jeg</td>
      <td>Manik</td>
    </tr>
    <tr>
      <td>Krist</td>
      <td>Jay</td>
    </tr>
    <tr>
      <td>Kil</td>
      <td>Mofend</td>
    </tr>
    <tr>
      <td>Wenbsi</td>
      <td>Asu</td>
    </tr>
  </tbody>
</table>

不幸的是，在我添加了以下 CSS 属性之后，宽度不再占据整个宽度并与 body 对齐。

thead {
  display: block;
  position: fixed;
}

下面是我添加上述 CSS 后的样子。

#name-list {
  width: 100%;
}

td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #CCCCCC;
  font-family: Arial;
  font-size: 12px;
}

thead {
  display: block;
  position: fixed;
}

thead>tr>td {
  font-weight: bold;
  background-color: #DDDDDD;
}

tbody>tr>td {
  width: 50%;
}

<table id="name-list">
  <thead>
    <tr>
      <td>First Name</td>
      <td>Last Name</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Janet</td>
      <td>Wonder</td>
    </tr>
    <tr>
      <td>Aaron</td>
      <td>Main</td>
    </tr>
    <tr>
      <td>Allan</td>
      <td>Bul</td>
    </tr>
    <tr>
      <td>Carey</td>
      <td>Jay</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>Mkl</td>
    </tr>
    <tr>
      <td>Mel</td>
      <td>Jane</td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>King</td>
    </tr>
    <tr>
      <td>Jem</td>
      <td>Winfred</td>
    </tr>
    <tr>
      <td>Jaine</td>
      <td>Kim</td>
    </tr>
    <tr>
      <td>Kim</td>
      <td>Joo</td>
    </tr>
    <tr>
      <td>Jeg</td>
      <td>Manik</td>
    </tr>
    <tr>
      <td>Krist</td>
      <td>Jay</td>
    </tr>
    <tr>
      <td>Kil</td>
      <td>Mofend</td>
    </tr>
    <tr>
      <td>Wenbsi</td>
      <td>Asu</td>
    </tr>
  </tbody>
</table>

我知道这可以使用 jQuery 轻松完成，但我正在寻找一种 CSS 原生的方式，而不是使用 jQuery 在渲染后动态设置宽度。

感谢任何输入/反馈/建议。

谢谢。

Answer 1

这通常是通过为固定 header 使用单独的表格来实现的(例如，引用 https://datatables.net/examples/basic_init/scroll_y.html)。

当使用 position:fixed 时，单元格从表格中取出，因此不再由 tbody 单元格内容或样式的宽度决定。因此，另一种方法是明确设置它们，从而失去 % 响应能力。

#hdr-name-list {
 width: 100%;
 position: fixed;
 margin-top: -10px
}

#name-list {
  width: 100%;
  padding-top: 25px
}

td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #CCCCCC;
  font-family: Arial;
  font-size: 12px;
}

thead>tr>td {
  font-weight: bold;
  background-color: #DDDDDD;
}

tbody>tr>td {
  width: 50%;
}

<table id="hdr-name-list">
  <thead>
    <tr>
      <td>First Name</td>
      <td>Last Name</td>
    </tr>
  </thead>
<table id="name-list">
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
    </tr>
    <tr>
      <td>Janet</td>
      <td>Wonder</td>
    </tr>
    <tr>
      <td>Aaron</td>
      <td>Main</td>
    </tr>
    <tr>
      <td>Allan</td>
      <td>Bul</td>
    </tr>
    <tr>
      <td>Carey</td>
      <td>Jay</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>Mkl</td>
    </tr>
    <tr>
      <td>Mel</td>
      <td>Jane</td>
    </tr>
    <tr>
      <td>Jay</td>
      <td>King</td>
    </tr>
    <tr>
      <td>Jem</td>
      <td>Winfred</td>
    </tr>
    <tr>
      <td>Jaine</td>
      <td>Kim</td>
    </tr>
    <tr>
      <td>Kim</td>
      <td>Joo</td>
    </tr>
    <tr>
      <td>Jeg</td>
      <td>Manik</td>
    </tr>
    <tr>
      <td>Krist</td>
      <td>Jay</td>
    </tr>
    <tr>
      <td>Kil</td>
      <td>Mofend</td>
    </tr>
    <tr>
      <td>Wenbsi</td>
      <td>Asu</td>
    </tr>
  </tbody>
</table>