CSS でtableの一部をsticky ... 使えない
tableの中でスクロールさせる部分と固定させる部分を分けるときにCSSでposition: stickyを指定するというのを調べていた
新しいposition: sticky;が便利という記事が多かったので試してみたら…
どのHTML / CSSの参考サイトも指定のtdかth要素をstickyにするか，absoluteにするかでスクロールに対して止めていた。
参考を見ながら試してみたコードは以下のようなものだが…
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
width: 400px;
overflow:scroll;
height:100%;
}
table {
table-layoute: auto;
border-collapse: collapse;
}
tbody th {
background-color: #4a4aff;
color: white;
width: 300px;
height: 70px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
border:1px solid white;
}
thead {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
thead th.blank {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 3;
}
td {
text-align: center;
background-color: #efefff;
width: 300px;
height: 70px;
border: 1px solid black;
}
tr:nth-of-type(2n+1) td {
background-color: #ffffff;
}
/*td:nth-of-type(1) {
position: sticky;
left:0px;
}
th:nth-of-type(1) {
position: sticky;
left:0px;
z-index:3;
}
colgroup:nth-of-type(1) {
position: absolute;
left:0px;
z-index:3;
}*/
</style>
</head>
<body>
<div id="wrapper">
<table>
<colgroup span="3" style="border:2px solid black;">
<colgroup span="7">
<tr><th>TEST</th><th>TEST2</th><th>TEST3</th><th>TEST4</th><th>TEST5</th><th>TEST</th><th>TEST2</th><th>TEST3</th><th>TEST4</th><th>TEST5</th></tr>
<tbody>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</tbody>
</table>
</div>
</body>
</html>
確かに，簡単なコードでヘッダが固定されるのだが固定されるのはヘッダのセルだけで境界は固定されないのだ…
スクロースしてみると境界が透けて見える
これではデザインがうるさいと使えない。
せっかくとあるJavaScriptフレームワークの学習を始めたのにjqueryでグリグリいじりまくるコーディングに逆戻り…
結局jQueryが手放せない。
