【HTML/CSS】スクロールバー付きテーブルを作ってみた

日常のいろいろ

こんにちは、ぷにこです🐹

本日は、自己学習として理解したことを

ブログに備忘録として残そうと思います。

至らない部分も多々多いと思いますので、

もしこの記事を読んでいただける方がおりましたら、

お手柔らかに見ていただけますと幸いです🐣

｜本日の学び

  1. まずはーテーブルの骨組みを作ってみる
  2. スクロールができるようにする
  3. ヘッダー・フッターを固定する

【おまけ】

id、class名　命名の仕方何にしよう・・・（練習段階で迷いだす）

参考にしたサイト↓　　　　　　　　　　　https://qiita.com/itagakishintaro/items/168667d5ee4c56b30d52

まずはテーブルの骨組みを作ってみる

はじめに、テーブルに必要な要素をHTMLで記載しました。

<!-- HTML -->
  <main>
    <section id="scrollableTable" class="wrapper">
      <table>
        <thead>
          <tr>
            <th>ヘッダー</th>
            <th>ヘッダー</th>
            <th>ヘッダー</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>ボディ</td>
            <td>ボディ</td>
            <td>ボディ</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>フッター</td>
            <td>フッター</td>
            <td>フッター</td>
          </tr>
        </tfoot>
      </table>
    </section>
  </main>

シンプルすぎるので、枠をつけます。CSSで指定します。

<!-- CSS -->
  .table-layout {
    margin: 0 25% 25% 25%;
    border: solid 1px black;
  }
<!-- CSS -->
  .table-layout {
    margin: 0 25% 25% 25%;
    border: solid 1px black;
  }

  .table-layout thead tr th, 
  .table-layout tbody tr td,
  .table-layout tfoot tr td {
    border: solid 1px black;
  }

スクロールをつけるには、行がなさすぎるので行を増やします。

<tbody></tbody>の中に、行を意味する<tr></tr>を追加で9個追加します。

<tr></tr>の中には、カラム（列）分（<th></th>の個数）のセルデータ（<td></td>）を追加します。今回は列が3列のため、3個追加します。

<!-- HTML -->
  <main>
    <section id="scrollableTable">
      <table class="table-layout">
        <thead>
          <tr>
            <th>ヘッダー</th>
            <th>ヘッダー</th>
            <th>ヘッダー</th>
          </tr>
        </thead>
        <tbody>
          <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>
        </tbody>
        <tfoot>
          <tr>
            <td>フッター</td>
            <td>フッター</td>
            <td>フッター</td>
          </tr>
        </tfoot>
      </table>
    </section>
  </main>

ヘッダーの文字が意図せず太くなっているのが嫌だったので、

CSSを指定。

※font-weight：none;　が効かなかった・・・。

　font-weight: nomal;で効いた・・・。

ヘッダーとフッターがわかりやすいように色を付けました。

<!-- CSS -->
.table-layout thead tr th {
  font-weight: normal;
  background-color: #ef86b2;
}

.table-layout thead tr th,
.table-layout tbody tr td,
.table-layout tfoot tr td {
  border: solid 1px black;
}

.table-layout tfoot tr td {
  font-weight: normal;
  background-color: coral;
}

スクロールができるようにする

<table></table>を<div></div>で囲み、

<div>にクラス名　table-containerを付与して、そこに  overflow-y: scroll;（縦にスクロール）を追加しました。

他にも、見やすいようにCSSで微調整しています。

<!-- HTML -->
  <main>
    <section id="scrollableTable">
      <div class="table-container">
        <table class="table-layout">
          <thead>
            <tr>
              <th>ヘッダー</th>
              <th>ヘッダー</th>
              <th>ヘッダー</th>
            </tr>
          </thead>
          <tbody>
            <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>
          </tbody>
          <tfoot>
            <tr>
              <td>フッター</td>
              <td>フッター</td>
              <td>フッター</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </section>
  </main>
<!-- CSS -->
.table-container {
  height: 200px;
  width: 100px;
  margin: 0 25% 25% 45%;
  overflow-y: scroll;
}

.table-layout {
  border: solid 1px black;
  /* overflow-y: scroll; */
}

.table-layout thead tr th {
  font-weight: normal;
  background-color: #ef86b2;
}

.table-layout thead tr th,
.table-layout tbody tr td,
.table-layout tfoot tr td {
  border: solid 1px black;
}

.table-layout tfoot tr td {
  font-weight: normal;
  background-color: coral;
}

ちなみに、<table></table>自体に対して  overflow-y: scroll;　を追加しても、効かなかったです。

あくまでも、<table></table>を囲んでいる外側の<div></div>に対して追加することが必要そうです。

ヘッダー・フッターを固定する

ヘッダー・フッターを固定します。

<thead></thead>にヘッダーを固定するためのCSSを、<tfoot></tfoot>にフッターを固定するためのCSSを追加しました。

<!-- CSS -->
.table-container {

  height: 200px;

  width: 100px;

  margin: 0 25% 25% 45%;

  overflow-y: scroll;

}

.table-layout {

  border: solid 1px black;

  /* overflow-y: scroll; */

}

.table-layout thead {

  position: sticky;

  top: 0px;

  z-index: 2px;

}

.table-layout tfoot {

  position: sticky;

  bottom: 0px;

  z-index: 2px;

}

.table-layout thead tr th {

  font-weight: normal;

  background-color: #ef86b2;

}

.table-layout thead tr th,

.table-layout tbody tr td,

.table-layout tfoot tr td {

  border: solid 1px black;

}

.table-layout tfoot tr td {

  font-weight: normal;

  background-color: coral;

}

これで、ヘッダー・フッターを固定しつつ、スクロールができるテーブルができました！

ただ一つ・・・気になることが・・・

黄色く囲っているここの部分の枠線が、

スクロールする度に、表示されたり消えたり・・・

なんならスクロールの位置によっては、

body部分がちらみえしている・・・

この部分の調節が厄介だったりします(´；ω；`)

この点については課題としてとっておいて、

また別の機会に投稿したいと思います！

本日はこれにて・・・おわります。

ぷにこ🐹

コメント

タイトルとURLをコピーしました