レスポンシブデザインで実際によく使うtableレイアウト・コピペ | 福岡のホームページ制作はマリオ君にお任せ

為にならないブログ

見出しおじさん

BLOG

レスポンシブデザインで実際によく使うtableレイアウト・コピペ

2023年09月01日

レスポンシブデザインで実際によく使うtableレイアウト・コピペ

本日は個人的にレスポンシブデザインでホームページを制作する際に実務でよく使うtableレイアウトをご紹介させていただきます。

tableはやや複雑な動きを致しますが、細かいことは気にせずに大まかにご説明させていただきます。

こんな方に向いている記事

  • レスポンシブのtable気になる
  • レスポンシブだと何か違うの？
  • 記事は若干いい加減でもいい
  • 少しでも為になれば

よく使うテーブルレイアウト3選とプラス1

レスポンシブでtable

会社概要やお問い合わせフォームでよく使う縦見出し、名簿などでよく使う横見出し、比較などをするときによく使う縦横見出し、そして困ったらスクロールの４つをご紹介させていただきます。

文字数によってはそのままでも問題ないですが、少しでも見やすくできるように、スマホ時はテーブルのレイアウトを変えて、ユーザビリティーアップを狙っていきたいと思います。

それではご説明に入りたいと思います。

  • 縦見出し
  • 横見出し
  • 縦横見出し
  • スクロールさせる

の４パターンです。
ブレイクポイントは768pxで設定しています。

縦見出しは2パターンご紹介いたします。

完成品の確認はブラウザの横幅を小さくして確認してください。

会社概要でよく使うテーブル・縦見出し

会社概要でよく使う

完成品はこちら

会社名(th) マリオ君(td)
住所(th) 福岡だよ(td)
事業内容(th) ホームぺージ作ってる(td)

htmlはこちら

<table class="tatemi">
	<tr>
		<th>会社名(th)</th>
		<td>マリオ君(td)</td>
	</tr>
	<tr>
		<th>住所(th)</th>
		<td>福岡だよ(td)</td>
	</tr>
	<tr>
		<th>事業内容(th)</th>
		<td>ホームぺージ作ってる(td)</td>
	</tr>
</table>

CSSはこちら

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}
	input{

    width: 100%;
    padding: 10px;
    border: 1px solid #EEE;
    box-sizing: border-box;
}
}
.tatemi{
	
	width: 100%;
	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		width: 30%;
		@media screen and (max-width: 768px){

			//widh:30%;
		}
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
	}
	
}

解説です。
PCだけのCSSでやっています。

会社概要などで使う場合でtdに入れる内容が少ない場合はPCのCSSのままで使いまわします。文字数が少ない場合は特に違和感なく表示されますので基本そのままで。

thの改行などが気になる場合は29行目でスマホ用の横幅をいじって調整する感じです。

CSSは１行目から17行目までは見た目を整えるためで特に気なしなくていいです。
一応ご説明すると3行目のborder-collapse:collapse;でテーブルのボーターを重ねて表示するようにしています。
5行目から9行目はthとtdにパディング（内側への余白）とbox-sizing: border-box;で余白や線を横幅に含む設定にしています。
8行目のline-heightは改行してしまったときに改行が大きくならないように1.3に設定しています。

お問い合わせフォームでよく使うテーブル・縦見出し

お問い合わせフォームでよく使う

完成品はこちら

会社名(th)
住所(th)
担当者(th)

htmlはこちら

<table class="tatemi02">
	<tr>
		<th>会社名(th)</th>
		<td><input type="text" name="inp" placeholder="tdの中"></td>
	</tr>
	<tr>
		<th>住所(th)</th>
		<td><input type="text" name="inp" placeholder="tdの中"></td>
	</tr>
	<tr>
		<th>担当者(th)</th>
		<td><input type="text" name="inp" placeholder="tdの中"></td>
	</tr>
</table>

CSSはこちら

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}
	input{

    width: 100%;
    padding: 10px;
    border: 1px solid #EEE;
    box-sizing: border-box;
}
.tatemi02{
	
	width: 100%;
    @media screen and (max-width: 768px){

    	border-bottom: 1px solid #DDD;
    }

	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		width: 30%;
		@media screen and (max-width: 768px){
			
			display: block;
			width: 100%;
			border-bottom: none;
			
		}
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
		@media screen and (max-width: 768px){
			
			display: block;
			border-bottom: none;
			width: 100%;
		}
	}
}

解説です。
今回の様にtdの中に大きな幅がいる時などは、会社概要の時の様にそのまま表示するとスマホではかなり見えずらくなりますので、blockにして縦に並べます。

縦に並べる方法はthとtdともにblockにします。thを33行目でtdを45行目で指定しています。
その際にthの横幅を30％から横幅いっぱいの100％に34行目で指定しています。

注意点としてはもともとtableは特殊な要素なのですが、blockを指定したことによりtableでなくなってしまうので、先ほどご説明したborder-collapse:collapse;でテーブルのボーターを重ねて表示するようにするが、利かなくなってしまいボーダーの線が重なって太く表示されてしまいます。

そこで重なりあう線の部分のボーダーをnoneにしています。
35行目でthのボーダーの下の線を無しに。
46行目でtdのボーダーの下の線を無しにしています。
そうすると、一番下の線がなくなってしますので、
22行目でテーブルの下の部分にのみ線を引いて調整している感じです。

以上が縦見出しでよく使うテーブルです。

続いてはよく使う横見出しのテーブルです。

メンバー紹介や名簿でよく使うテーブル①・横見出し

メンバー紹介・名簿でよく使う

完成品はこちら

名前(th) レベル(th) 職業(th) 出身地(th)
アレル(td) LV.25(td) 勇者(td) 東京(td)
カンダタ(td) LV.40(td) 盗賊(td) 埼玉(td)
バラモス(td) LV.50(td) 魔王(td) 神奈川(td)

htmlはこちら

<table class="yokomi01">
	<tr class="tr01">
		<th>名前(th)</th>
		<th>レベル(th)</th>
		<th>職業(th)</th>
		<th>出身地(th)</th>
		
	</tr>
	<tr>
		<td>アレル(td)</td>
		<td>LV.25(td)</td>
		<td>勇者(td)</td>
		<td>東京(td)</td>
	</tr>
	<tr>
		<td>カンダタ(td)</td>
		<td>LV.40(td)</td>
		<td>盗賊(td)</td>
		<td>埼玉(td)</td>
	</tr>
	<tr>
		<td>バラモス(td)</td>
		<td>LV.50(td)</td>
		<td>魔王(td)</td>
		<td>神奈川(td)</td>
	</tr>
</table>

cssはこちら

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}

.yokomi01{
	
	
	width: 100%;
    @media screen and (max-width: 768px){

    	border-bottom: 1px solid #DDD;
    }
	
	.tr01{
		
		@media screen and (max-width: 768px){
			
			display: none;
			
		}

		
	}
	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
		text-align: center;
		@media screen and (max-width: 768px){
			
			display: block;
			border-bottom: none;
			width: 100%;
		}
		
	}
	
	td:first-child{
		
		@media screen and (max-width: 768px){
			
			
			background: #FFF9E6;
			text-align: center;
			font-weight: bold;
		}
	}
	
}

解説です。
今回は見出しが横に並んでいるケースのテーブルレイアウトになります。
スマホ時は思い切ってthを囲っているtrを14行目のdisplay:none;で非表示にしています。
併せて、お問い合わせフォームでよく使うテーブルと同様に、blockにして縦組みのレイアウトにしています。

また、これだけだと、味気ないので、tdの先頭を今までのthの様に見出し扱いにしています。
41行目のtd:first-childでtdの先頭にのみCSSで命令し
46～48行目で見出しと同様のCSSを入れています。

しかし、縦組みレイアウトになって見やすくはなりましたが、thの見出しを消してしまったので内容によっては若干メンバー紹介かどうか初見の方にはわからないかもしれないので次は少し違うパターンをご紹介します。

メンバー紹介や名簿でよく使うテーブル②・横見出し

メンバー紹介・名簿でよく使う②

完成見本はこちら

名前 レベル 職業 出身地
キャラクター紹介 アレル LV.25 勇者 東京
キャラクター紹介 カンダタ LV.40 盗賊 埼玉
キャラクター紹介 バラモス LV.50 魔王 神奈川

htmlはこちら

<table class="yokomi01">
	<tr class="tr01">
		<th>名前</th>
		<th>レベル</th>
		<th>職業</th>
		<th>出身地</th>
		
	</tr>
	<tr>
		<td class="spon">キャラクター紹介</td>
		<td>アレル</td>
		<td>LV.25</td>
		<td>勇者</td>
		<td>東京</td>
	</tr>
	<tr>
		<td class="spon">キャラクター紹介</td>
		<td>カンダタ</td>
		<td>LV.40</td>
		<td>盗賊</td>
		<td>埼玉</td>
	</tr>
	<tr>
		<td class="spon">キャラクター紹介</td>
		<td>バラモス</td>
		<td>LV.50</td>
		<td>魔王</td>
		<td>神奈川</td>
	</tr>
</table>

CSSはこちら

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}
.yokomi01{
	
	
	width: 100%;
    @media screen and (max-width: 768px){

    	border-bottom: 1px solid #DDD;
    }
	
	.tr01{
		
		@media screen and (max-width: 768px){
			
			display: none;
			
		}

		
	}
	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
		text-align: center;
		@media screen and (max-width: 768px){
			
			display: block;
			border-bottom: none;
			width: 100%;
		}
		
	}
	
	td:first-child{
		
		@media screen and (max-width: 768px){
			
			
			background: #FFF9E6;
			text-align: center;
			font-weight: bold;
		}
	}
	
	.spon{
		
		display: none;
		@media screen and (max-width: 768px){
			
			
			display: block;
		}
		
	}
}

解説です。
先ほどよりわかりやすくなるように、スマホ時にのみキャラクター紹介の文字を入れています。
tdの先頭ににキャラクター紹介の文言を追加しており、クラスsponで768px以上は非表示、以下は表示で切り替えています。
※他のやり方としては先頭のtdに疑似要素beforeなどで入れることもできます。

大分わかりやすくはなりましたが、まだ、ドラクエをやったことがない方は、LV.25って何？と思ったり、東京？何が東京なのってなる可能性はまだまだ高いです。

次は横見出しの最後ですが更にわかりやすくしてみたいと思います。

メンバー紹介や名簿でよく使うテーブル③・横見出し

メンバー紹介・名簿でよく使う③

完成見本はこちら

名前 レベル 職業 出身地
キャラクター紹介 アレル LV.25 勇者 東京
カンダタ LV.40 盗賊 埼玉
バラモス LV.50 魔王 神奈川

htmlはこちら

<table class="yokomi02">
	<tr class="tr01">
		<th>名前</th>
		<th>レベル</th>
		<th>職業</th>
		<th>出身地</th>
		
	</tr>
	<tr>
		<td class="spon">キャラクター紹介</td>
		<td data-label="名前">アレル</td>
		<td data-label="レベル">LV.25</td>
		<td data-label="職業">勇者</td>
		<td data-label="出身地">東京</td>
	</tr>
	<tr>
<td class="spon">キャラクター紹介</td>
		<td data-label="名前">カンダタ</td>
		<td data-label="レベル">LV.40</td>
		<td data-label="職業">盗賊</td>
		<td data-label="出身地">埼玉</td>
	</tr>
	<tr>
<td class="spon">キャラクター紹介</td>
		<td data-label="名前">バラモス</td>
		<td data-label="レベル">LV.50</td>
		<td data-label="職業">魔王</td>
		<td data-label="出身地">神奈川</td>
	</tr>
</table>

CSSはこちら

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}
.yokomi02{
	
	
	width: 100%;
    @media screen and (max-width: 768px){

    	border-bottom: 1px solid #DDD;
    }
	
	.tr01{
		
		@media screen and (max-width: 768px){
			
			display: none;
			
		}

		
	}
	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		text-align: center;
		
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
		text-align: center;
		@media screen and (max-width: 768px){
			
			display: block;
			border-bottom: none;
			width: 100%;
			
		}
	}
	td:not(:first-child){
		@media screen and (max-width: 768px){
						
			&::before{
				
				content: attr(data-label);
				font-size: 0.5rem;
				display: block;
				margin: 0 0 10px;
			}
		}
		
	}
	td:first-child{
		
		@media screen and (max-width: 768px){
			
			
			background: #FFF9E6;
			text-align: center;
			font-weight: bold;
		}
	}
	.spon{
		
		display: none;
		@media screen and (max-width: 768px){
			
			
			display: block;
		}
		
	}

}

解説です。
先ほどとの違いは、htmlで各項目のtdの部分に
date-labelでもともとのthに入っていた言葉を入れています。

そのdate-labelの中に書いている文字をCSSの
41行目td:not(:first-child)で先頭のtd以外で疑似要素を指定しています。

先頭のtd以外の疑似要素beforeで
46行目のcontent:attr(data-label);で各data-labelの文字読み込んで表示させています。
これで、名前やレベル・職業・出身地も表示され、わかりやすくなりました。

比較などでよく使うテーブル・縦横見出し

比較などでよく使う
完成見本はこちら
デザイン 価格 対応
マリオ君 〇 〇 〇
A社 〇 △ △
B社 △ 〇 △

htmlはこちら

<table class="tatemi06">
	<tr class="tr01">
		<th></th>
		<th>デザイン</th>
		<th>価格</th>
		<th>対応</th>
		
	</tr>
	<tr>
		
		<th>マリオ君</th>
		<td data-label="デザイン">〇</td>
		<td data-label="価格">〇</td>
		<td data-label="対応">〇</td>
	</tr>
	<tr>
		<th>A社</th>
		<td data-label="デザイン">〇</td>
		<td data-label="価格">△</td>
		<td data-label="対応">△</td>
	</tr>
	<tr>	
		<th>B社</th>
		<td data-label="デザイン">△</td>
		<td data-label="価格">〇</td>
		<td data-label="対応">△</td>
	</tr>
</table>

CSSはこちら

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}
.tatemi06{
	
	
	width: 100%;
    @media screen and (max-width: 768px){

    	border-bottom: 1px solid #DDD;
    }
	
	.tr01{
		
		@media screen and (max-width: 768px){
			
			display: none;
			
		}

		
	}
	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		@media screen and (max-width: 768px){
			
			display: block;
			border-bottom: none;
			
		}
		
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
		text-align: center;
		@media screen and (max-width: 768px){
			
			display: block;
			border-bottom: none;
			width: 100%;
			text-align: left;
			
			
		}
	}
	td{
		@media screen and (max-width: 768px){
			
			display: flex;
			align-items: center;
			&::before{
				
				content: attr(data-label);
				display: block;
				color: #FFF;
				background: #F84851;
				margin: 0 10px 0 0;
				height: 100%;
				padding: 10px;
				width: 100px;
				text-align: center;
			}
		}
		
	}


}

解説です。
こちらはメンバー紹介や名簿でよく使うテーブル③のcontent:attr(data-label);で各data-labelの文字読み込ませる方法とほとんど作り方は同じですが、少し変化をつけていて、tdの中の疑似要素の部分をfloatで横並びにしています。

51行目のdisplay:flex;で疑似要素とtdの中身を横並びにして、align-items:center;で中央揃いにしています。

スペースの問題上一目で比較はしずらくはなりましたが、各項目が入っているのでわかりやすくはなっていると思います。

しかし、上記でご説明させていただいたものは、横の項目が3～4程度などで、縦組みに変更してもそこまでおかしくありませんが、10個程度項目がある場合に縦組みにすると縦にすごくスペースをとってみずらくなることもあります。

その場合はスクロースさせるのがおすすめです。

スクロールさせて表示①

スクロールバーを出して表示

横に量が多い時、複雑な時、困った時はスクロールを出して乗り切りましょう。正直、横長の時は全部スクロールでいいんじゃないかと個人的には思っています。

マリオ君のトップぺージのご依頼の流れでも中身はテーブルではありませんが使用しています。

完成見本

デザイン 価格 対応 CMS SEO 管理
マリオ君 〇 〇 〇 〇 〇 〇
A社 〇 △ △ △ △ 〇
B社 △ 〇 △ 〇 △ △

htmlはこちら

<div class="sukurobox">

<table class="sukuro">
	<tr>
		<th></th>
		<th>デザイン</th>
		<th>価格</th>
		<th>対応</th>
		<th>CMS</th>
		<th>SEO</th>
		<th>管理</th>
	</tr>
	<tr>
		<th>マリオ君</th>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
	</tr>
	<tr>
		<th>A社</th>
		<td>〇</td>
		<td>△</td>
		<td>△</td>
		<td>△</td>
		<td>△</td>
		<td>〇</td>
	</tr>
	<tr>	
		<th>B社</th>
		<td>△</td>
		<td>〇</td>
		<td>△</td>
		<td>〇</td>
		<td>△</td>
		<td>△</td>
	</tr>
</table>
</div>

CSSはこちら

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}
	
}
	
.sukurobox{

    @media screen and (max-width: 980px){

    overflow: scroll;
   
	
    }
}
	
.sukuro{
	
	
	width: 100%;
    @media screen and (max-width: 980px){

		width: 1000px;
    }
	
	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
		text-align: center;
	}

}

解説です。
テーブルを囲うdivをクラス名sukuroboxで作っています。
囲ったdivに17行目のoverflow:scroll;を指定して横幅と縦幅の最大値を超えるとスクロールバーが出るようにしています。

29行目で980px以下はテーブルの横幅を1000pxとして指定していますので、980px以下からスクロールバーが出るようになっています。%で横幅を指定してもスクロールされないので、絶対値のpxで横幅は指定しています。

簡単にスクロールバーをつけることができました。

スクロールさせて表示②ヒントをつける

スクロールヒントを出して表示

スクロールできるように設定しても、見ている方がスクロールできるかどうか理解できなければ意味がないので、見ている人にここはスクロールできるよってヒントをつけたいと思います。
こちらは、scroll-hint.jsのライブラリで簡単にヒントをつけることができます。

scroll-hint.js設置方法

公式サイトに行ってファイルをダウンロードします。

公式サイトはこちら

公式サイトを開いたらダウンロードボタンがありますので、クリックしてファイルをダウンロード。

スクロールヒントフォルダをダウンロード
フォルダから必要なファイルを出す

フォルダをダウンロードしたら、
CSSフォルダから
scroll-hint.css
jsフォルダから
scroll-hint.min.js
を取り出して
自分のサイトのcssフォルダとjsフォルダの中に入れます。
これで準備が整いましたので記述していきます。

ダウンロードしたscroll-hint.cssとscroll-hint.min.jsを読み込みます。
CSSをhead内にジャバスクリプトはbodyの閉じタグの前に記述します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/scroll-hint.css">
</head>

<body>
	
	
<script type="text/javascript" src="js/scroll-hint.min.js"></script>
<script type="text/javascript">
	new ScrollHint('.js-scrollable');
</script>
</body>
</html>

6行目でcssフォルダの中にあるscroll-hint.cssを読み込み
12行目でjsフォルダの中にあるscroll-hint.min.jsを読み込んでいます。
そして、14行目でジャバスクリプトを記述してスクロールヒントを使えるようにしています。

こちらに中身を追加したhtmlはこちら

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/scroll-hint.css">
</head>

<body>
	<div class="sukurobox js-scrollable">

<table class="sukuro">
	<tr>
		<th></th>
		<th>デザイン</th>
		<th>価格</th>
		<th>対応</th>
		<th>CMS</th>
		<th>SEO</th>
		<th>管理</th>
	</tr>
	<tr>
		<th>マリオ君</th>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
	</tr>
	<tr>
		<th>A社</th>
		<td>〇</td>
		<td>△</td>
		<td>△</td>
		<td>△</td>
		<td>△</td>
		<td>〇</td>
	</tr>
	<tr>	
		<th>B社</th>
		<td>△</td>
		<td>〇</td>
		<td>△</td>
		<td>〇</td>
		<td>△</td>
		<td>△</td>
	</tr>
</table>
</div>
	
<script type="text/javascript" src="js/scroll-hint.min.js"></script>
<script type="text/javascript">
	new ScrollHint('.js-scrollable');
</script>
</body>
</html>

先ほどとhtmは同じですが1点追加しています。
10行目のテーブルを囲っているdivにクラス.js-scrollableをつけています。
これでスクロールヒントが出るようになります。
10行目のクラス名js-scrollableと
54行目のカッコの中に入っているクラス名は同一でないと動きません。

CSSは先ほどのスクロールと同じです。

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}
	
}
	
.sukurobox{

    @media screen and (max-width: 980px){

    overflow: scroll;
    
	
    }
}
	
.sukuro{
	
	
	width: 100%;
    @media screen and (max-width: 980px){

		width: 1000px;
    }
	
	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
		text-align: center;
	}

}

で完成品はこちら

デザイン 価格 対応 CMS SEO 管理
マリオ君 〇 〇 〇 〇 〇 〇
A社 〇 △ △ △ △ 〇
B社 △ 〇 △ 〇 △ △

スクロールのアイコンがでてきましたので、スクロールできることが一目でわかるようになりました。

簡単に設置できるのでまだ使われていない方は是非一度使ってみてください。

スクロールさせて表示③ヒントをつけてかつ先頭固定

こんなに長くやるつもりはなかったのですが、こちらが最後になります。

先ほどのスクロールヒントを付けたものをさらに見やすく？するために先頭（見出し）を固定します。場合によっては固定した方が見やすくなりますのでそちらご紹介して終わりたいと思います。

固定することにより、どれに対する項目なのか一目でわかるようになります。

完成見本はこちら

デザイン 価格 対応 CMS SEO 管理
マリオ君 〇 〇 〇 〇 〇 〇
A社 〇 △ △ △ △ 〇
B社 △ 〇 △ 〇 △ △

htmlはこちら

<div class="sukurobox02 js-scrollable">

<table class="sukuro02">
	<tr>
		<th class="kasanari"></th>
		<th>デザイン</th>
		<th>価格</th>
		<th>対応</th>
		<th>CMS</th>
		<th>SEO</th>
		<th>管理</th>
	</tr>
	<tr>
		<th>マリオ君</th>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
		<td>〇</td>
	</tr>
	<tr>
		<th>A社</th>
		<td>〇</td>
		<td>△</td>
		<td>△</td>
		<td>△</td>
		<td>△</td>
		<td>〇</td>
	</tr>
	<tr>	
		<th>B社</th>
		<td>△</td>
		<td>〇</td>
		<td>△</td>
		<td>〇</td>
		<td>△</td>
		<td>△</td>
	</tr>
</table>
</div>

CSSはこちら

table{
	
	border-collapse:collapse;
	
	th,td{
		padding: 20px;
		box-sizing: border-box;
		line-height: 1.3;
	}
	
}
	
.sukurobox02{

    @media screen and (max-width: 980px){

    overflow: scroll;
    height: 200px;
	
    }

.sukuro02{
	
	
	width: 100%;
    @media screen and (max-width: 980px){

		width: 1000px;
    }
	
	th{
		
		border: 1px solid #DDD;
		background: #FFF9E6;
		padding: 20px;
		position: sticky;
		left: 0;
		top:0;
    z-index: 1;
		&:before{
			content: "";
			position: absolute;
			border: 1px solid #DDD;
			top: -1px;
			left: -1px;
			width: 100%;
			height: 100%;
			
		 }
	}
	th.kasanari{
		
		z-index: 10;
	}
	td{
		
		border: 1px solid #DDD;
		padding: 20px;
		text-align: center;
	}

}

解説です。
囲っているdivにわかりやすくするため高さを入れました（18行目）。テーブルの最大値より低い高さを入れると、１行目と１列目両方固定されます。高さを入れない場合は1列目だけ固定される仕様です。

見出しのthは36行目のposition:sticky;で固定しています。
thにposition:stickyを入れてz-index:1;で重なりを一つ前にだすだけで簡単に見出しを固定することができます。しかし、見出しを固定するとボーダーが固定されず？線がなくなってしまうので、疑似要素のbeforeで線を上書きしています。

あとは固定した時に、左上の空欄のthの部分が重なり順で一番上にしたいので、クラス.kasanariをつけてzindex;10;をいれて一番手前にしています。

これで、スクロールヒント付きで見出しも固定されました。
※スクロールヒントのイラストの重なり順がthより下になるので、scroll-hint.cssの中に.scroll-hint-iconにz-index:11;を追加するとthより前にきます。

以上になります。

いかがでしたでしょうか。長々と書いてしまいましたが、レスポンシブデザインの実務で使用するコピペで使えるテーブルレイアウト集？？でした。
色々なやり方がありますので、やりやすいやり方でいいかなと～と思います。

今回はテーブルレイアウトのお話でしたが、全体の枠組みでフレキシブルレイアウトの作り方を下記にてご紹介しておりますので興味のある方はご覧ください。

フレキシブルレイアウト作り方！超初級編
関連こっちもみてね
フレキシブルレイアウト作り方！超初級編

最後に記事を長々と書いた後にこんなこと言うのもなんですが、正直、テーブルをレスポンシブで一つのコードで書こうとすると複雑になってしまい、逆に運用がしずらくなるケースもありますので、普通に画像で作ってもいいと思いますし、PC用とスマホ用でコードを二つ書くのも全然OKだと思います。

ここがチェケラ

ポイントです

POINT

複雑なものは画像でいいんじゃね!?2つ書いていいんじゃね!?

それではまた。

一覧へ
こっちもみて！関連記事

カテゴリー

人気!?記事

気になったら
連絡してね!

すいません

お電話は出れないことが多いので
ラインでもしもし・メールでもしもしが推奨です。

お時間をとらせていただきゆっくり
お電話させていただきます。

©Copy Rights MARIOKUN.All Rights Resarved.
Page Top
お問い合わせ

どうぞおじさん

作業中はお電話は出れないことが多いのでライン・メールでもしもしが推奨です。

お電話は出れないことが多いの折り返し致します。