粘着性のある行ヘッダーと粘着性のある行ヘッダーを持つテーブルを設計しようとしていますthead。したがって、基本的にはすべてのth要素が粘着性である必要があります。
position: sticky多くのブラウザーではまだサポートされていませんが (これは私にとっては問題ではありません)、この仕事に適していると思われる css3 属性を偶然見つけました。ただし、MDN のドキュメントには次のように書かれています。
テーブル要素に対する「position: sticky」の効果は、「position: relative」の場合と同じです。
これを考慮して、スティッキー要素の境界が保存されていなくても、Safari 10.0 で動作する基本的な例を作成しました。
firefox 50.0 では、ボーダーは表示されませんが、ヘッダーは固定されません。
だから、私の質問は: を使用して、この固定ヘッダーの配置をきれいに達成するにはどうすればよいですかposition: sticky? 実装 (実装された場合) は完全ではなく、テーブルのサポートはさらに少ないようです。
それが不可能な場合は、これを実現する JavaScript のソリューションにもオープンです (ただし、アプリ全体が反応しているため、スタックに jQuery を追加するのは非常に面倒です)。
ここに私が今持っているもののコードスニペットがあります。固定ヘッダーを使用するには、基本的にサファリまたはクロムのアルファ版が必要であることに注意してください。
div#container {
height: 200px;
width: 300px;
overflow: auto;
}
table {
border-collapse: collapse;
}
tbody th {
position: -webkit-sticky;
position: sticky;
left: 0px;
}
thead {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
th {
background: #B8C1C8;
border: 2px solid black;
}<div id="container">
<table>
<thead>
<tr>
<th>hehe</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
</tr>
</thead>
<tbody>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
<tr>
<th>I'm a super long header</th>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
<td>hello</td>
<td>world</td>
</tr>
</tbody>
</table>
</div>私が試したリソース：
- typanus からの素晴らしい記事
- 広告にスティッキーを配置すると、
position: sticky position: stickyスペック_