FireFoxで table セルに sticky かけると border消える 解決策 table に border-collspace:separate # まとめ.
CSSの position: sticky を使ってテーブルのヘッダー行・列を固定する方法を解説します。 動作確認したブラウザーは次のとおりです。 Google Chrome 71; Firefox 64; Safari 12; Microsoft Edge 43 (EdgeHTML 17) ちなみに、IE 11などの対応していないブラウザーで見た場合、ヘッダー行・列が固定されないだけ …
Firefox/Chromeでtable要素の「position: sticky」が動作しない問題の対処方法を紹介します。 1．問題点. CSS3 には、 CSS2 には無かったような便利なプロパティが追加されています。今回、特に注目してみたのが position: sticky というプロパティと値です。 これによって、 今までは JavaScript を使わないとできなかったことが、 CSS だけで実現できるようになりました。
Firefox では table 内の sticky は未対応ですし Chrome ではバグがあります Chrome のバグというのは fixed 状態になったら border が表示されないというものです border-collapse が collapse のときだけ起きる問題なので collapse にしないことで対策は可能です サンプル 左側が div positionプロパティの新しい値です。 「position: sticky」と位置（top, right, bottom, left）を指定して、固定したい要素が指定した位置にくると「fixed」のように振る舞い、それ以外だと「relative」になる、という感じです。 Today we’re announcing that we intend to adopt the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility for our customers and less fragmentation of the web for all web developers. なので、↑のようにその消えるborder部分が現れた時は、その消えた部分のthやtdに直接borderを記述したりして対処していましたが、ちょっと驚き？の解決法を発見したので、ご紹介します。もしかしたら基本的な、普通の事かもしれませんが。 position: stickyとは.
だいたいのバグは table に border-collspace:separate をかければ解決します。 テーブルのヘッダ部分がページの上部にさしかかると「position: sticky」で表示が固定されるサンプルを作りました。
次のEdgeはChromiumベース.