时间戳

首页 > 解决方案 > 带有 HTML 表格的粘性标题

html - 带有 HTML 表格的粘性标题

问题描述

我正在尝试开发修复标题 html 表。我使用基本的 HTML 和 CSS 来做这件事。但它不起作用。为此，我在谷歌搜索。我使用下面的示例来执行此操作。我申请正确。但不能很好地工作 资源

 
body{height:100px; overflow:scroll}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  height:300px;
}
th{position: sticky !important}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
  height:100px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
</body>
</html>

当页面滚动时，我需要修复我的表格标题。我怎么做？请检查我的样品

标签： htmlcss

解决方案

你没有正确应用它。

顶部：0；

是将位置：粘性，放在顶部的关键。

th {
  background: white;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

推荐阅读