Html 表格标题上的表格td行重叠_Html_Css

Html 表格标题上的表格td行重叠

html css

Html 表格标题上的表格td行重叠,html,css,Html,Css,我首先创建表，然后用ajax获取数据，创建td并在其中放入div，但是td中的div会在表标题滚动中出现表格标题样式： table th { background-image: -moz-linear-gradient(top, blue, yellow); color: white; font-family: 'BRoya'; font-weight: bold; position: sticky; top: 0; cursor: p

我首先创建表，然后用

ajax

获取数据，创建

td

并在其中放入

div

，但是

td

中的

div

会在

表

标题滚动中出现

表格标题样式：

table th {
    background-image: -moz-linear-gradient(top, blue, yellow);
    color: white;
    font-family: 'BRoya';
    font-weight: bold;
    position: sticky;
    top: 0;
    cursor: pointer;
}

正如您所看到的

div

在

tr

的内部出现在

表格

标题上

能否请您共享表格代码结构，以便我检查实际问题？请更新完整的代码

为了让您理解，我正在共享html表的正确结构

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>


<table>
  <tr>
    <th><div>Company</div></th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><div>Dummy</div></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>

</table>

</body>
</html>

很明显，因为它是粘性的，顶部：0。我想你还没有做过太多的测试来修复它。@Archer我不能改变，因为我想我的表格标题在滚动条中被修复，看起来你需要在th中使用z-index 1！！！

table th {
top:0;
}