1

テーブル ヘッダーをフリーズして、ヘッダーの幅と残りの行を一致させることができましたが、ヘッダーの下から最初の 2 行を表示することができません。 

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行をヘッダーの下から移動する方法について、誰かが私を正しい方向に向けることができますか? さらに説明する必要がある場合、または質問に追加する必要がある場合はお知らせください。

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そのようなテーブルヘッダーで実際に使用したことはありませんが、必要に応じてフレームの上部に固定していると思います。問題は、固定位置の要素がページのスペースをまったく占有しないことです。要素はその下にスライドします。margin-topに aを追加するtbodyか、それが機能しない場合は に追加することで、これを補うことができるはずですtable tr:first-child。

それもうまくいかない場合は、適切なサイズの空trを上部に貼り付けて、それで完了です.

編集：実際、フィドルをいじってみると、固定位置のテーブルヘッダーがブラウザの行の幅を正しく設定しているようには見えません。どのブラウザを使用していますか? これは、クロスブラウザーの互換性の問題を引き起こす可能性のある型にはまらない CSS のタイプのようです。(テーブルはそのようにトリッキーになる傾向があります。)

于 2013-08-29T20:31:16.220 に答える