将表格标题列宽度与表格主体对齐在不同的表格中

Question

由于定位原因，我有一个表头需要（我相信）留在一个单独的表中。告诉表头根据下面不同<table>内的tbody内容确定其列间距的最佳方法是什么？由于我正在处理的结构中的一些限制，很难将它们移动到同一个表中，所以不幸的是，这可能不是一个选项。

例如，我有这样的事情：

<table> 
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <th>Five</th>
        </tr>
    </thead>
</table>

<div>
    <p>Some keys here about what highlighted text below means</p>
</div>

<table> 
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
    </tbody>
</table>

顶部表头处于固定位置，因此当用户滚动表时，表和键将在其后面滚动。我无法找到一种方法让TH与下面的TD匹配，就像它们在同一个表中组合时一样。是否有一个我不知道的技巧使它们成为同一数据集的一部分？

Answer 1

最简单的方法是确保两个表具有相同的父元素。然后将th和第一行td标记的宽度设置为相对百分比， 因此，由于两个元素具有相同的父元素，因此它们的宽度也将匹配。如下所示。

＆＃13;

＆＃13;

html,
body {
  margin: 0px;
}

table {
  width: 100%
}

＆＃13;

<table border="1" class="fix">
  <thead>
    <tr>
      <th style="width:20%">One</th>
      <th style="width:20%">Two</th>
      <th style="width:20%">Three</th>
      <th style="width:20%">Four</th>
      <th style="width:20%">Five</th>
    </tr>
  </thead>
</table>

<div>
  <p>Some keys here about what highlighted text below means</p>
</div>

<table border="1">
  <tbody>
    <tr>
      <td style="width:20%">One</td>
      <td style="width:20%">Two</td>
      <td style="width:20%">Three</td>
      <td style="width:20%">Four</td>
      <td style="width:20%">Five</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

这是针对表格td的问题。现在，标题的固定位置可以像这样实现。

＆＃13;

＆＃13;

html,
body {
  margin: 0px;
}

.fix {
  position: fixed;
  top: 0px;
}

.offset {
  margin-top: 50px;
}

table {
  width: 100%
}

＆＃13;

<table border="1" class="fix">
  <thead>
    <tr>
      <th style="width:20%">One</th>
      <th style="width:20%">Two</th>
      <th style="width:20%">Three</th>
      <th style="width:20%">Four</th>
      <th style="width:20%">Five</th>
    </tr>
  </thead>
</table>

<div class="offset">
  <p>Some keys here about what highlighted text below means</p>
</div>

<table border="1">
  <tbody>
    <tr>
      <td style="width:20%">One</td>
      <td style="width:20%">Two</td>
      <td style="width:20%">Three</td>
      <td style="width:20%">Four</td>
      <td style="width:20%">Five</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;