複雑なテーブルヘッダーのスティッキー

複雑なヘッダーを扱うためにスティッキーテーブルヘッダーを取得しようとしています。それは標準のテーブルでうまく動作します。テーブルは先頭行に固定され、2番目の行には固定されず、ヘッダーが「外れた」または千鳥のように見えるようになります。私はtheadにポジションを貼り付けることを試みたが、それは何もしていないようだった。ここで複雑なテーブルヘッダーのスティッキー

が私のテーブルです：

table { 
 
    border: 1px solid black; 
 
    font-size: 14px; 
 
    margin: 10px 0; 
 
    position: relative; 
 
} 
 

 
thead tr th { 
 
    background-color: gray; 
 
    position: sticky; 
 
    top: -2px; 
 
} 
 

 
thead { 
 
    border: 1px solid black; 
 
    line-height: 1.25; 
 
    overflow: hidden; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    line-height: 1.25; 
 
    overflow: hidden; 
 
    padding: 4px; 
 
}

<table class='sticky-table'> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="2">First column</th> 
 
     <th colspan="3">Top of second column</th> 
 
    </tr> 
 
    <tr> 
 
     <th>One</th> 
 
     <th>Two</th> 
 
     <th>Three</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2017-11-16 loctrice

私は以下のJSが問題を解決します信じています。国境には奇妙なことがいくつかありますが、適切に貼り付けられます。

var tableHeaderTop = document.querySelector('.sticky-table thead').getBoundingClientRect().top; 
 
var ths = document.querySelectorAll('.sticky-table thead th') 
 

 
for(var i = 0; i < ths.length; i++) { 
 
    var th = ths[i]; 
 
    th.style.top = th.getBoundingClientRect().top - tableHeaderTop + "px"; 
 
}

table { 
 
    border: 1px solid black; 
 
    font-size: 14px; 
 
    margin: 10px 0; 
 
    position: relative; 
 
} 
 

 
thead tr th { 
 
    background-color: gray; 
 
    position: sticky; 
 
    top: -2px; 
 
} 
 

 
thead { 
 
    border: 1px solid black; 
 
    line-height: 1.25; 
 
    overflow: hidden; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    line-height: 1.25; 
 
    overflow: hidden; 
 
    padding: 4px; 
 
}

<table class='sticky-table'> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="2">First column</th> 
 
     <th colspan="3">Top of second column</th> 
 
    </tr> 
 
    <tr> 
 
     <th>One</th> 
 
     <th>Two</th> 
 
     <th>Three</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2017-12-04 18:56:21 Alex

スペースがコード化された「ハード」であるので、私は、このソリューションが好きではありませんが、必要に応じて、それは動作しますが、私は、考えていませんそれ？

table { 
 
    border: 1px solid black; 
 
    font-size: 14px; 
 
    margin: 10px 0; 
 
    position: relative; 
 
} 
 

 
thead tr th { 
 
    background-color: gray; 
 
    position: sticky; 
 
    top: -2px; 
 
} 
 

 
.header { 
 
    background-color: gray; 
 
    position: sticky; 
 
    top: 20px; 
 
} 
 

 
thead { 
 
    border: 1px solid black; 
 
    line-height: 1.25; 
 
    overflow: hidden; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    line-height: 1.25; 
 
    overflow: hidden; 
 
    padding: 4px; 
 
}

<table class='sticky-table'> 
 
    <thead> 
 
    <tr> 
 
     <th rowspan="2">First column</th> 
 
     <th colspan="3">Top of second column</th> 
 
    </tr> 
 
    <tr> 
 
     <th class="header">One</th> 
 
     <th class="header">Two</th> 
 
     <th class="header">Three</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>First cell</td> 
 
     <td>Second cell</td> 
 
     <td>Third cell</td> 
 
     <td>Fourth cell</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

出典

2017-11-16 20:13:50

これは間違いなく私の考えるアプローチを提供します。しかし、スタイルは他の誰かの作者のために働かなければならないので、私はこれをハードコーディングすることはできません。 – loctrice

残念ながら、Firefoxはまだスティッキーテーブルヘッダーをサポートしていません。すべてのブラウザーが適切なサポートを追加するまで、固定された位置を使用することが唯一の解決策だと私は考えます –

CSSプロパティをサポートするブラウザーについては心配する必要があります。そうでなければ、通常のテーブルのように振る舞います。 – loctrice

複雑なテーブルヘッダーのスティッキー

答えて

関連する問題