粘性标题可以在滚动 Div 中用于表标题吗？

滚动 Div 中的粘性标题

位置：粘性；属性在 Webkit 中获得了关注，使元素在滚动期间能够在其父容器中保持固定。然而，一些开发人员表示需要将此功能扩展到包含表格的滚动 div 元素。

粘性定位可以应用于滚动 div 内的表格标题吗？

答案：

确实，位置：置顶；现在可以用于 ; elements 截至 2018 年！

实现：

只需将以下行添加到您的 CSS 样式表中：

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

先决条件：

• 确保您的表格包含 。 <第>

  示例表格标记：

  <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>
        // body code
      </tbody>
  </table></code>

  其他选项：

  • 要修复 的第一行滚动时，使用以下内容：

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

    浏览器支持：

    截至 2018 年 3 月，现代浏览器广泛支持 thead 元素的粘性定位，感谢开发者社区的努力。

以上是粘性标题可以在滚动 Div 中用于表标题吗？的详细内容。更多信息请关注PHP中文网其他相关文章！