可以對錶外的表標題使用'position:sticky”嗎？

黏性表格標題

Webkit 中引入了使元素黏在其父元素內的功能。雖然您可以使用 JavaScript 和絕對定位在表格本身內實現表格標題的黏性行為，但值得考慮黏性定位是否可以提供更簡單的解決方案。

position: Sticky 是否適用於表格外部的表格標題表？

是的，可以使用黏性定位將表格標題黏在表外。透過添加以下 CSS，您可以實現此效果：

<code class="css">thead th {
  position: sticky;
  top: 0;
}</code>

要對表格標題使用黏性定位，您的表格應該有一個包含每個列標題的 th 元素的 thead 元素。以下是一個範例：

<code class="html"><table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table body content -->
  </tbody>
</table></code>

限制和相容性

需要注意的是，雖然黏性定位適用於現代瀏覽器中的表格標題，但不同設備的兼容性可能會有所不同和瀏覽器。據 caniuse.com 稱，截至 2018 年 3 月，現代瀏覽器對黏性定位的支援普遍良好：https://caniuse.com/#feat=css-sticky

以上是可以對錶外的表標題使用'position:sticky”嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！