【CSS】tableの行(列)を『sticky』で固定したときにスクロールしても線が消えないようにしてみる

【CSS】テーブルの行(列)を固定してスクロールする
tableの項目を固定したのですが、線が消えちゃいますー
ちょっとした工夫が必要ですねー

tableの『行』を固定してスクロールする(失敗作)

See the Pen 【CSS】テーブル(table)の行を固定してスクロールする(失敗作) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<table>
  <tr>
    <th class="_sticky">固定くん</th>
    <th class="_sticky">固定くん</th>
    <th class="_sticky">固定くん</th>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #f00;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
th {
  background: #ffeb3b;
}
td {
  background: #fff;
}
._sticky {
  position: sticky;
  top: 0;
  left: 0;
}

tableの『行』を固定してスクロールする

before(擬似要素)を使ってスクロール時の枠線の補助をしています。

See the Pen 【CSS】テーブル(table)の行を固定してスクロールする by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<table>
  <tr>
    <th class="_sticky">固定くん</th>
    <th class="_sticky">固定くん</th>
    <th class="_sticky">固定くん</th>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <td>テキスト</td>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
</table>

CSS

._sticky:before(擬似要素)を使ってスクロール時の枠線の補助をしています。

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #f00;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
th {
  background: #795548;
}
td {
  background: #fff;
}
._sticky {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
}
._sticky:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #f00;
  border-bottom: 1px solid #f00;
  background: #ffeb3b;
  z-index: -1;
}

tableの『列』を固定してスクロールする(失敗作)

See the Pen 【CSS】テーブル(table)の列を固定してスクロールする(失敗作) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
  <table>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </table>
</div>

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #f00;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
th {
  background: #ffeb3b;
}
td {
  background: #fff;
}
._sticky {
  position: sticky;
  top: 0;
  left: 0;
}

tableの『列』を固定してスクロールする

before(擬似要素)を使ってスクロール時の枠線の補助をしています。

See the Pen 【CSS】テーブル(table)の列を固定してスクロールする by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
  <table>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </table>
</div>

CSS

._sticky:before(擬似要素)を使ってスクロール時の枠線の補助をしています。

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #f00;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
th {
  background: #795548;
}
td {
  background: #fff;
}
._sticky {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
}
._sticky:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #f00;
  border-bottom: 1px solid #f00;
  background: #ffeb3b;
  z-index: -1;
}

tableの『行と列』を固定してスクロールする(失敗作)

See the Pen 【CSS】テーブル(table)の行と列を固定してスクロールする(失敗作) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
  <table>
    <tr>
      <th class="_sticky_ab">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </table>
</div>

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #f00;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
th {
  background: #ffeb3b;
}
td {
  background: #fff;
}
._sticky_a {
  position: sticky;
  top: 0;
  left: 0;
}
._sticky_a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
._sticky_b {
  position: sticky;
  top: 0;
  left: 0;
}
._sticky_b:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
._sticky_ab {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}
._sticky_ab:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

tableの『行と列』を固定してスクロールする

before(擬似要素)を使ってスクロール時の枠線の補助をしています。

See the Pen 【CSS】テーブル(table)の行と列を固定してスクロールする by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
  <table>
    <tr>
      <th class="_sticky_ab">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
      <th class="_sticky_b">固定くん</th>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky_a">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </table>
</div>

CSS

._sticky:before(擬似要素)を使ってスクロール時の枠線の補助をしています。

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #f00;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
th {
  background: #795548;
}
td {
  background: #fff;
}
._sticky_a {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-left: none;
  border-right: none;
}
._sticky_a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 1px solid #f00;
  border-right: 1px solid #f00;
  background: #ffeb3b;
  z-index: -1;
}
._sticky_b {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
}
._sticky_b:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #f00;
  border-bottom: 1px solid #f00;
  background: #ffeb3b;
  z-index: -1;
}
._sticky_ab {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  z-index: 1;
}
._sticky_ab:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #f00;
  border-bottom: 1px solid #f00;
  border-left: 1px solid #f00;
  border-right: 1px solid #f00;
  background: #ffeb3b;
  z-index: -1;
}

tableの『列』を固定してスクロールする(separateを使ってみる、線が太くなってしまう)

『border-collapse: collapse;』を『border-collapse: separate;』にしてみます。
separateを使うと擬似要素も使わなくていいので一気に問題解決だ!と思いきや、border(線)が太くなってしまうのです。collapseとseparateの差ですね。

See the Pen 【CSS】テーブル(table)の列を固定してスクロールする(separateを使ってみる、線が太くなってしまう) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
  <table class="a">
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </table>
</div>

CSS

table.a {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table.a th, table.a td {
  vertical-align: middle;
  padding: 20px;
  border: 1px solid #f00;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
table.a th {
  background: #ffeb3b;
}
table.a td {
  background: #fff;
}
table.a ._sticky {
  position: sticky;
  top: 0;
  left: 0;
}

tableの『列』を固定してスクロールする(separateを使ってみる、thとtdをborderで調整する、少し面倒だったりする)

tableのthとtdのborderを上と右と左と下で設定していく感じですね。これもいいのですが、ちょっと面倒なので個人的にはあまり使わないですね。

See the Pen 【CSS】テーブル(table)の列を固定してスクロールする(separateを使ってみる、thとtdをborderで調整する、少し面倒だったりする) by 125naroom (@125naroom) on CodePen.

HTMLとCSSはこちら

HTML

<div class="scroll-box">
  <table class="b">
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
    <tr>
      <th class="_sticky">固定くん</th>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
    </tr>
  </table>
</div>

CSS

table.b {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table.b th, table.b td {
  vertical-align: middle;
  padding: 20px;
  border-right:1px solid #f00;
  border-bottom:1px solid #f00;
  color: #000;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}
table.b th {
  background: #ffeb3b;
}
table.b td {
  background: #fff;
}
table.b ._sticky {
  position: sticky;
  top: 0;
  left: 0;
}
table.b tr:first-child th, table.b tr:first-child td {
  border-top:1px solid #f00;
}
table.b th:first-child, table.b td:first-child {
  border-left:1px solid #f00;   
}

制作メモ

2023年2月現在、ベンダープレフィックスは不要で問題ないです。
ベンダープレフィックスが必要なものも少なくなってきましたね。

対応ブラウザ

『position: sticky;』の対応ブラウザは下記サイトで確認できます。
IE対応は必要ないので、stickyは問題なく使えますね。

IE対応をする場合は『Polyfill』を使えば問題なし

なぜだかわからないけどIE対応してほしいと依頼があった場合は『Polyfill』を使いましょう。
まずは『Polyfill』に必要なファイルを下記サイトからダウンロードします。

ダウンロードファイルの中で必要なファイルは以下の1点です。

  • stickyfill.min.js

HTML

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/stickyfill.min.js"></script>

JS

$(function() {
  var elements = document.querySelectorAll('.sticky');
  Stickyfill.add(elements);
});

さいごに

おー、すごーい
ちょっとした工夫が楽しいですねー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

5

/

22

2024

Googleさんの
おすすめ

5

/

22

2024

デザインの記事

UNBOX 2nd
  • 2024.05.20New
  • UNBOX 2nd
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
早朝始発の殺風景