自分だけのマイCSSフレームワークをつくる(テーブル編)

自分だけのマイCSSフレームワーク(フレームワークというより、Webサイトをつくる際のベースとなる部品のようなもの)をつくることを目指してやっていきます。

今日は、テーブル部分のパーツをつくります。

テーブル部分のHTML

HTML
<div class="table-responsive">
<table class="table">
<caption>テーブル</caption>
<thead>
  <tr>
    <th>th. テキスト</th>
    <th>th. テキスト</th>
    <th>th. テキスト</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th>th. テキスト</th>
    <tr>tr. テキスト</th>
    <tr>tr. テキスト</th>
  </tr>
  <tr>
    <th>th. テキスト</th>
    <tr>tr. テキスト</th>
    <tr>tr. テキスト</th>
  </tr>
  <tr>
    <th>th. テキスト</th>
    <tr>tr. テキスト</th>
    <tr>tr. テキスト</th>
  </tr>
</tbody>
</table>
</div>

テーブル部分のCSSの設定

2種類のテーブルのスタイルを用意しました。

枠線で囲んだテーブルのスタイル

style.css
.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table caption {
  font-size: 1.4rem;
  text-align: left;
}

table,
th,
td {
  padding: 10px 15px;
  border: solid 1px #aaa;
}

table,
td {
  font-size: 1.4rem;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th {
  font-weight: 500;
}

thead th {
  background-color: #ddd;
}

tbody th {
  background-color: #eee;
}

横線のみのシンプルなテーブルのスタイル

style.css
.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-spacing: 0;
}

table caption {
  font-size: 1.4rem;
  text-align: left;
}

th,
td {
  margin: 0;
  padding: 10px 15px;
  border-bottom: solid 1px #ddd;
  white-space: nowrap;
}

td {
  font-size: 1.4rem;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 500;
}

thead th {
  background-color: #ddd;
}

tbody th {
  background-color: #eee;
}

white-space: nowrap;で文字を折り返さないようにさせ、overflow-x: auto;で画面の幅より大きくなったときに横スクロールするようにしています。
スマホでサイトを見るときでも、テーブルのレイアウトを崩さずに表示することができます。
ですが、スクロールバーが見えていないと、横スクロールできることに気づかない恐れもありますね…


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です