skillup

技術ブログ

デザイン

tableでのヘッダー固定に関して+borderを描く時のコツ

投稿日:2019年9月29日 更新日:

tableでのヘッダー固定について

超小ネタですが、tableのヘッダー固定に関して。

ソースは下記リンクに。

https://github.com/umanari145/css

注意したいポイントとして、

  • tableをいうことを頭から消して、あくまでblockとflexで組む。
  • 固定のヘッドは position:sticky
  • 内包要素は動的に変わることが多いので、幅を%指定しておく。親も指定。
  • th、tdをテーブルではなく display:block にする。高さを内包要素依存にするためにこれが必要。(内包要素のセンタリングなどを考えるとflexもいいかも・・・)
  • 横並びにするためにstickyを使うタイプはtrに display:flex を入れる。
  • boarderを二重にしないことが大切。(全消ししてから,tr→th→tdといれて行くとわかりやすいかも)
  • ヘッドと明細の幅を統一。
  • paddingやborderの幅で少しずれることがあるため、 box-sizing:border-box をセット。

のようなところ。

サンプルソース(scss)

borderを描く時のコツ

上記と合わせてtableでborderを描く時のコツなんぞを。borderなかったり、二重線やドットが混じるケースですね。

  • sassを使った方がはるかに楽
  • まずは全てのbordrerを消す
  • 入れるのは基本 tr,th(td) のみ
  • 同一方向でのみborderを定義(例:trなら上のみ、tdなら左のみなど)
  • last-child,first-child でイレギュラーパターンを押させる tr の下端や td 右端

サンプル

https://github.com/umanari145/css/blob/master/table_border.html

すげー基礎的なことかもしれませんが、以前こういう思考がなくて結構迷いましたね・・・

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

アーカイブ