17

一番上の行がposition:relativeであるテーブルがあります。IE 9 では、position 属性を追加すると、セル間の境界線が非表示になります。(これは 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;
}

jsフィドル

于 2012-10-18T00:22:22.373 に答える