时间戳

首页 > 解决方案 > table td row 重叠在表头上

html - table td row 重叠在表头上

问题描述

我首先创建表，然后我获取数据ajax并创建td并放入div其中，但这div是在td过来的table标题中抛出滚动。

表头样式：

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出现了table标题

在此处输入图像描述

标签： htmlcss

解决方案

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

为了您理解，我正在分享 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>

这也是由于这个删除这个css而发生的，它会很好谢谢

table th {
top:0;
}

推荐阅读