Q&A
border-collapse は table にしか適用されません。
separate ではだめなのでしょうか？
一番左の列をposition:stickyで固定し、左右スクロールできるようにしているのですが
スクロールした際に該当セルの右側の線が消えてしまいます。（赤カッコで囲った部分）
こちらも合わせて固定する方法をご存知の方いらっしゃったらご教示いただきたいです。
Chrome/FireFox で動けば問題ないです。
長々と申し訳ありませんが、以下にコードを記載いたします。
HTML
1<div class="container"> 2 <table> 3 <tr> 4 <th></th> 5 <th colspan="10">見出し1</td> 6 <th colspan="10">見出し2</td> 7 </tr> 8 <tr> 9 <th class="dateData">日付</th> 10 <th>1</th> 11 <th>2</th> 12 <th>3</th> 13 <th>4</th> 14 <th>5</th> 15 <th>6</th> 16 <th>7</th> 17 <th>8</th> 18 <th>9</th> 19 <th>10</th> 20 21 <th>1</th> 22 <th>2</th> 23 <th>3</th> 24 <th>4</th> 25 <th>5</th> 26 <th>6</th> 27 <th>7</th> 28 <th>8</th> 29 <th>9</th> 30 <th>10</th> 31 </tr> 32 <tr> 33 <th class="dateData">2019/01/01</th> 34 <td></td> 35 <td></td> 36 <td></td> 37 <td></td> 38 <td></td> 39 <td></td> 40 <td></td> 41 <td></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 <td></td> 46 <td></td> 47 <td></td> 48 <td></td> 49 <td></td> 50 <td></td> 51 <td></td> 52 <td></td> 53 <td></td> 54 </tr> 55 <tr> 56 <th class="dateData">2019/01/02</th> 57 <td></td> 58 <td></td> 59 <td></td> 60 <td></td> 61 <td></td> 62 <td></td> 63 <td></td> 64 <td></td> 65 <td></td> 66 <td></td> 67 <td></td> 68 <td></td> 69 <td></td> 70 <td></td> 71 <td></td> 72 <td></td> 73 <td></td> 74 <td></td> 75 <td></td> 76 <td></td> 77 </tr> 78 <tr> 79 <th class="dateData">2019/01/03</th> 80 <td></td> 81 <td></td> 82 <td></td> 83 <td></td> 84 <td></td> 85 <td></td> 86 <td></td> 87 <td></td> 88 <td></td> 89 <td></td> 90 <td></td> 91 <td></td> 92 <td></td> 93 <td></td> 94 <td></td> 95 <td></td> 96 <td></td> 97 <td></td> 98 <td></td> 99 <td></td> 100 </tr> 101 </table> 102</div>
CSS
1 2.container table, .container th, .container td { 3 border-spacing: 0; 4 border-collapse: collapse; 5} 6 7.container th, .container td { 8 border:1px solid #ccc; 9 } 10 11 12.container tr:first-child { 13 border-top:none; 14 } 15 16.apidataOverall table { 17 container: none; 18} 19 20.container th:first-child { 21 position: -webkit-sticky; 22 position: sticky; 23 left: 0; 24 border-left: none; 25 border-collapse: separate; 26 border-right: 1px solid #ccc; 27} 28 29.container tr:first-child th{ 30 border-top: none; 31} 32 33.container td:last-child , .container th:last-child { 34 border-right: none; 35} 36 37.container { 38 width: 940px; 39 height: 470px; 40 overflow: scroll; 41 background-color: #f7f7f7; 42 border: 1px solid #ccc; 43} 44 45.container th { 46 min-width: 80px; 47 padding: 5px 10px; 48 font-size: 12px; 49 color: #555; 50 background-color: #fff; 51 font-weight: bold; 52}
回答1件
0
ベストアンサー
擬似要素を使えばご希望のデザインが作れます。
まず、以下のスタイルの「border-rightプロパティ」は削除してしまって大丈夫です。
.container th:first-child { position: -webkit-sticky; position: sticky; left: 0; border-left: none; border-collapse: separate; border-right: 1px solid red;←これは削除してOK }
加えて、上記セレクタに擬似要素を指定し、
その擬似要素にborderを設定します。
.container th:first-child::before{ content : "" ; position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; border-right : 1px solid blue ; }
これをそのままご自身のCSSに書き加えれば
青い線が固定で表示されるはずです。
投稿2019/07/24 13:23
総合スコア139
ご教示いただきありがとうございます！
思っていたような挙動にすることができました!
もしお手間でなければご教示いただけるとありがたいのですが...
そもそも、なぜ横にスクロールすると当該の線も一緒にスクロールして消えてしまうのでしょうか？
（position:sticky の仕様？）
`.container th:first-child`についているborder ということで、
`position:sticky`で固定で残ってくれるのでは？と思いまして。。
よかったです。
すみません。追加のご質問に関しては正直僕もよくわかりません。
このような挙動はjsで処理する方が多いと思うので、
恥ずかしながら僕も最近までstickyを知りませんでした。
確かにyayayaさんのおっしゃるように固定で残りそうな気がしますが、
なぜか一緒に動いてしまうんですね。
お力になれずすみません。
追加の質問にもご回答いただき、ありがとうございます！
いえ....！とんでもないです....！
JSで処理することが多いと思うというご見解もいただけて嬉しいです。
諸々、ご教示いただき、感謝です！
あなたの回答
tips
プレビュー
