1

我已经能够冻结我的表格标题并让标题的宽度和其余行匹配，但我无法让我的前两行从标题下方显示出来。 

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

那么有人可以指出我如何将前两行从标题下方移出的正确方向吗？让我知道我是否需要解释更多或是否需要补充我的问题！

我添加了一些我认为我没有解释的东西http://jsfiddle.net/FyJwZ/4/

4

2 回答 2

5

这是一个正常工作的jsFiddle：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;
}

更新

这是一个更完整的例子：http: //jsfiddle.net/kzuwR/14/

于 2013-08-29T20:44:18.753 回答
0

你已经设置了thead{position:fixed}。我从来没有真正用过position:fixed这样的表头，但我认为它会像你想要的那样将它固定在框架的顶部。问题是固定位置的元素不会占用页面上的任何空间——东西会滑入它们的正下方。您应该能够通过将 a 添加margin-top到您的tbody, 或者，如果这不起作用，添加到table tr:first-child.

如果这也不起作用，我只需tr在顶部贴一个适当大小的空并完成它。

编辑：实际上，在玩弄你的小提琴时，固定位置的表格标题看起来并没有在我的浏览器上正确设置行的宽度。你使用的是什么浏览器？这似乎是可能导致跨浏览器兼容性问题的非常规 CSS 类型。（那样的话，表格往往很棘手。）

于 2013-08-29T20:31:16.220 回答