17

我有一张表，第一行是位置：相对。在 IE 9 中添加位置属性隐藏了单元格之间的边框。（这在 Chrome 中不会发生）。

我的问题与此类似，但我不能将顶行的 z-index 设置为低于其他行，因为它将是一个需要更高 z-index 的固定标题。

HTML

<table border="1">
            <tr >
                <td class="locked">header 1</td>
                <td class="locked">header 2</td>
            </tr>
            <tr >
                <td>data 1a</td>
                <td>data 1b</td>
            </tr>
            <tr >
                <td>data 2a</td>
                <td>data 2b</td>
            </tr>
        </table>

CSS

.locked {
            position: relative;
            background-color: Yellow;
        }

在此处输入图像描述

如何让边框显示出来，但保持 z-index 大于其他单元格？

编辑：这是解释为什么标题位置是相对的 jquery 代码。
1.它允许标题水平和垂直滚动。
2. 当您向下滚动页面超过 153 像素时，标题停留在屏幕顶部。

$(document).ready(function () {
    $(window).scroll(function(){ 
        var off = $(window).scrollTop();
        if (off < 153) {
            $(".frozenTop").css("top", 0);
        } else {
            $(".frozenTop").css("top", off - 153);
        }
    });
});
4

2 回答 2

25

如果仅适用于支持 CSS3 的浏览器，CSS3 属性background-clip可以帮助：

.locked {
    position: relative;
    background-color: Yellow;
    background-clip: padding-box;
}

有关此属性的详细信息：https ://developer.mozilla.org/en-US/docs/CSS/background-clip

于 2013-01-28T10:48:21.073 回答
3

试试这个也许有帮助

<td class="locked"><div>header 1</div></td>
<td class="locked"><div>header 2</div></td>

table {
border-spacing: 0px;
}
.locked {
  position: relative;
  border:none;
}
.locked div{
  border:2px black solid;
  background-color: Yellow;
  margin:-2px;
}

jsFiddle

于 2012-10-18T00:22:22.373 回答