冻结表头与css第一行在头下 [英] freeze table header with css first rows are under header

问题描述

我已经能够冻结我的表头，并使头的宽度和其余的行匹配。但我不能得到我的前2行显示从标题下。

I have been able to freeze my table headers and have the widths of the headers and the rest of the rows match up. But I am not able to get my first 2 rows to show out from under the header.

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;
}

因此，有人可能指示我朝着正确的方向移动前2行从标题下？让我知道如果我需要解释更多，或者如果我需要添加我的问题！

So can someone point me in the right direction on how to move the first 2 rows out from under the header? Let me know if I need to explain more or if I need to add on to my question!

推荐答案

这里是一个jsFiddle工作订单： http://jsfiddle.net/FyJwZ/7/

Here is a jsFiddle in working order: http://jsfiddle.net/FyJwZ/7/

这些都是我做的修改

/* 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;
}

UPDATE

以下是更完整的示例： http://jsfiddle.net/kzuwR/14/

Here is a more complete example: http://jsfiddle.net/kzuwR/14/

这篇关于冻结表头与css第一行在头下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！