tableで表を作成した時、表の上部を固定するために、theadタグにposition: stickey;を設定しました。

thead {
  position: sticky;
  top: 0;
  background-color: aqua;
  z-index: 10;
}

th {
  border: 1px solid #333333;
}

td {
  border: 1px solid #cccccc;
}

th,td {
  padding: 1rem 2rem;
}

image2

このままでは、枠線が二重線になるので、tableborder-collapse: collapse;を設定しました。

image3

これで、二重線の問題が解消されました。

試しに表をスクロールすると、

image4

固定した表の枠線が消えて、スクロールする枠線が見えるようになっています。

スクロールしても、枠線が消えないようにするには、擬似要素を使用します。

th::beforeを設定します。

positionabsoluteにし、widthheightを100%とします。

さらに、topleftを0にしましょう。

最後に、borderを設定します。

th::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 1px solid #333333;
}

thの方のborderを削除します。

また、thposition: relative;を設定しましょう。

th {
  position: relative;
}

では、ブラウザで確認しましょう。

image5

スクロールすると、

image6

先ほど消えた外枠が残っています。

もし、枠線の微妙なずれが気になる場合は、th::before内のwidthheightを微調整してください。

th::before {
  content: '';
  position: absolute;
  width: 99%;
  height: 98%;
  top: 0;
  left: 0;
  border: 1px solid #333333;
}

image7

ブログ一覧