Html 冻结带有CSS的表格标题第一行在标题下

我已经能够冻结我的表标题，并使标题的宽度与其余行的宽度匹配，但我无法从标题下显示前两行

table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;
    border-radius:3px;
    border-collapse:collapse;
    border-spacing: 0;
    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:2px 2px 2px 2px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #ededed;
}
table th:first-child {
    text-align: left;
}
table tr:first-child th:first-child {
    border-top-left-radius:3px;
    border-left: 0;
}
table tr:first-child th:last-child {
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
}
table td:first-child {
    text-align: left;
    border-left: 0;
}
table td {
    padding:2px 2px 2px 2px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    white-space: nowrap;
}
table tr:last-child td {
    border-bottom:0;
}
table tr:last-child td:first-child {
    border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius:3px;
}
table tr:hover td {
    background: #F7FE2E;
}
table th,
table td {
    width: 65px;
}
table tr,
table td {
    width: 65px;
    min-width: 65px;
}
#wrapper {
    width: auto;
    height: 850px;
    overflow-x: scroll;
    overflow-y: scroll;
}
thead {
    position: fixed;
}
tbody {
    position: relative;
}

那么，有人能告诉我如何从标题下移出前两行的正确方向吗？让我知道我是否需要解释更多或者我是否需要补充我的问题

我添加了一些我想我没有解释的东西，你已经设置了ad{position:fixed}。我从来没有实际使用过位置：固定在这样的表格标题上，但我假设它会像您希望的那样将其固定在框架顶部。问题是，固定位置元素不会占用页面上的任何空间，因为东西会在它们下面滑动。您应该能够通过在tbody中添加边距顶部来补偿这一点，或者，如果这不起作用，可以在表tr:first child中添加边距顶部

如果这也不起作用，我会在顶部粘贴一个大小合适的空tr，然后处理它

编辑：实际上，在摆弄你的小提琴时，固定位置的表格标题似乎没有正确设置我的浏览器上的行宽度。你用的是什么浏览器？这似乎是一种非传统的CSS，可能会导致跨浏览器兼容性问题。这样一来，表格往往会很棘手。

您已经设置了ad{position:fixed}。我从来没有实际使用过位置：固定在这样的表格标题上，但我假设它会像您希望的那样将其固定在框架顶部。问题是，固定位置元素不会占用页面上的任何空间，因为东西会在它们下面滑动。您应该能够通过在tbody中添加边距顶部来补偿这一点，或者，如果这不起作用，可以在表tr:first child中添加边距顶部

如果这也不起作用，我会在顶部粘贴一个大小合适的空tr，然后处理它

---

编辑：实际上，在摆弄你的小提琴时，固定位置的表格标题似乎没有正确设置我的浏览器上的行宽度。你用的是什么浏览器？这似乎是一种非传统的CSS，可能会导致跨浏览器兼容性问题。这样一来，表格就变得很棘手了。

下面是一个工作正常的JSFIDLE：

这些就是我所做的改变

/* this is what will do the trick */
tbody {
    display: block;
    padding-top: 21px;
}

thead {
    z-index: 1; /* put on top of other rows */
}

thead tr td {
    background: #ddd;
}

/* only using !important to override your styles below */
td {
    margin-left: 0 !important;
    width: 100px !important;
}

更新

---

下面是一个更完整的示例：

这是一个工作正常的JSFIDLE：

这些就是我所做的改变

/* this is what will do the trick */
tbody {
    display: block;
    padding-top: 21px;
}

thead {
    z-index: 1; /* put on top of other rows */
}

thead tr td {
    background: #ddd;
}

/* only using !important to override your styles below */
td {
    margin-left: 0 !important;
    width: 100px !important;
}

更新

---

---

这里有一个更完整的例子：

坦白地说，如果它像你说的那样工作，我会感到惊讶。但假设是这样的话，你有没有尝试过在你的T车身样式中添加边距顶部？我在我的T车身中添加了边距顶部，但它没有做任何事情。什么是错误的，为什么你认为它不应该工作@Kevinboucher是的，小提琴表明这个问题不是一个容易解决的问题。这通常需要一些JavaScript，尽管看起来简单的CSS应该可以工作。标题列似乎与正文列不对齐。你可以看看这个：或者这个：@KevinBoucher谢谢，我将在你发布的链接中尝试实现他们是如何做到这一点的。如果还有其他选择的话，我也不介意去看看。坦白说，如果这能像你说的那样奏效，我会感到惊讶。但假设是这样的话，你有没有尝试过在你的T车身样式中添加边距顶部？我在我的T车身中添加了边距顶部，但它没有做任何事情。什么是错误的，为什么你认为它不应该工作@Kevinboucher是的，小提琴表明这个问题不是一个容易解决的问题。这通常需要一些JavaScript，尽管看起来简单的CSS应该可以工作。标题列似乎与正文列不对齐。你可以看看这个：或者这个：@KevinBoucher谢谢，我将在你发布的链接中尝试实现他们是如何做到这一点的。如果还有其他选择，我也不介意看到。我使用chrome浏览器这很聪明，但我也有同样的问题，即标题行大小不正确。我使用chrome浏览器这很聪明，但我也有同样的问题，例如，标题行大小不正确。显示：表体上的块。。。不会弄坏任何东西吗？我的心都碎了。我不相信它会打破任何东西。是的，它似乎工作得很好；我只是没想到，我有一种感觉，我的php while语句把这一切都抛在脑后了。Edit：另外，margintop似乎没有任何作用，因为每当我在tr:first-child td:first-child{}表下放置某些内容时，它都会影响while语句中的每一行。这很奇怪。显示：桌子上的块。。。不会弄坏任何东西吗？我的心都碎了。我不相信它会打破任何东西。是的，它似乎工作得很好；我只是没想到，我有一种感觉，我的php while语句把这一切都抛在脑后了。编辑：另外，页边空白顶部似乎没有任何作用。因为每当我在表tr:first ch下面放东西时 ild td:first child{}它影响while语句中的每一行。这很奇怪。