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

投稿日：2019年9月29日更新日：2022年3月10日

Contents

1 tableでのヘッダー固定について
2 borderを描く時のコツ

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)

* {
    box-sizing: border-box;
}
 
*:before,
*:after {
    box-sizing: border-box; /* 擬似要素にも同様のプロパティを指定 */
}
table {
  display: block;
  width: 500px;
  height: 100%;
  thead, tbody {
    display: block;
  }
  thead {
    position: sticky;
  }
  tbody{
    height: 300px;
    overflow-y: scroll;
  }
  tr{
    display: flex;
    border-left:1px solid #e67e22;
  }
  th, td {
    display: block;
    width: 25%;
    background: #fff;
    border-right:1px solid #e67e22;
    font-size: 1.0rem;
  }
  th{
    border-top: 1px solid #e67e22;
    border-bottom: 2px solid #e67e22;
  }
  td{
    border-bottom: 1px solid #e67e22;
  }
}

* {

box-sizing: border-box;

}

*:before,

*:after {

box-sizing: border-box; /* 擬似要素にも同様のプロパティを指定 */

}

table {

display: block;

width: 500px;

height: 100%;

thead, tbody {

display: block;

}

thead {

position: sticky;

}

tbody{

height: 300px;

overflow-y: scroll;

}

tr{

display: flex;

border-left:1px solid #e67e22;

}

th, td {

display: block;

width: 25%;

background: #fff;

border-right:1px solid #e67e22;

font-size: 1.0rem;

}

th{

border-top: 1px solid #e67e22;

border-bottom: 2px solid #e67e22;

}

td{

border-bottom: 1px solid #e67e22;

}

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

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