ブログ

割とコンピュータよりの情報をお届けします。

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が手放せない。

2018/07/11 コンピュータ   TakeMe
< 前の記事     一覧へ     後の記事 >

コメント一覧

≫ 通りすがりのうどん脳
分かります、実装が中途半端で全く使い物になりません。
ボーダーは消えるわ、theadの固定に対応するのはFirefoxだけだわで、正直こんなの(Chrome)がブラウザのトップだというのが信じられません。

コメント送信フォーム


※ Eメールは公開されません
Loading...
 画像の文字を入力してください