125naroom / デザインするところ（会社）です。

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

【CSS】テーブルの行（列）を固定してスクロールする
きのこさん
tableの項目を固定したのですが、線が消えちゃいますー
きのこさん
おー、そりゃ失敗ですねー、対応しましょうー

1. 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;
}

2. 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;
}

3. 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;
}

4. 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;
}

5. 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%;
}

6. 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;
}

7. 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;
}

8. 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月現在、ベンダープレフィックスは不要で問題ないです。
ベンダープレフィックスが必要なものも少なくなってきましたね。

【CSS】ベンダープレフィックス 必要なもの不要なもの

対応ブラウザ

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

Can I use

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

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

stickyfill

ダウンロードファイルの中で必要なファイルは以下の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);
});

さいごに

きのこさん
おー、すごーい
きのこさん
ちょっとした工夫が楽しいですねー

関連記事

【CSS】簡単に固定できるposition: sticky;の実装サンプル集

【jQuery】スクロール途中から追尾（fixed）、指定位置（class）で消える

デザインのこと - Web design gallery
いつかのこと

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】アコーディオン実装サンプル10選
【jQuery】アコーディオン実装サンプル10選
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【CSS】シンプルなボタンデザイン実装サンプル集
【CSS】シンプルなボタンデザイン実装サンプル集

おすすめ

かんれん

【CSS】三角アイコンと矢印アイコンをつくる

みる

【CSS】background-colorを透過する時の備忘録（IE11対策）

みる

【CSS】animationを使って流れるテキストとかを作ってみる

みる

Googleさんのおすすめ

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

みる

【jQuery】アコーディオン実装サンプル10選

みる

【jQuery】スライダープラグイン「slick」実装サンプル集

みる

more

Googleさんのおすすめ

デザインの記事

信州アップルパイ研究所_Q
ちょっと思い出しただけ
【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える