Question

我想对齐标题和单元格的值，但是无法做到这一点。

我正在使用显示块滚动表主体。

我想用对齐的标题滚动表数据。

我的表格数据将是动态的，因此无法为标题和单元格使用固定长度。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table style="width: 100%; padding: 2px;">
  <thead style="display: table-row;">
    <tr>
      <th nowrap="nowrap" align="center">Name</th>
      <th nowrap="nowrap" align="center">Adreess</th>
      <th align="left" nowrap="nowrap" width="100%">Country</th>
    </tr>
  </thead>
  <tbody style="display: block; width: 100%; max-height: 100px; overflow-y: auto;">
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Answer 1

display: block会覆盖表的默认呈现，因此您将失去列对齐方式。您可以使用某些骇客，但它们在浏览器中的结果不一致。在不失去语义或不使用JavaScript来调整列大小的情况下，没有实现您想要的目标的好方法。

我的建议是使用position: sticky标头。

thead th {
  position: sticky;
  top: 0;
  background: white;
}

<table style="width: 100%; padding: 2px;">
  <thead>
    <tr>
      <th nowrap="nowrap" align="center">Name</th>
      <th nowrap="nowrap" align="center">Adreess</th>
      <th align="left" nowrap="nowrap" width="100%">Country</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
    <tr>
      <td style="padding: 2px;" align="right">H</td>
      <td align="left" nowrap="nowrap">Dhaka</td>
      <td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
    </tr>
  </tbody>
</table>

使用display时，标题单元格和行单元格未对齐：tbody中的块

1 个答案: