xhml・html

【ネットビジネス便利ツール】のモバイル対応、どのようにすれば良いか一番わからなかったテーブルについてです。

各ツールのマニュアルなどで所々テーブルを書いています。
スマートフォンでどのように表示すればわかりやすいかよくわからなかったので、色々表示させてみることにしました。

【ネットビジネス便利ツール】で使っているテーブルは2パターンあります。
項目などの一覧を表示しているテーブルと項目の名前とその説明のテーブルです。
さてどういう方法がいいのでしょう。

まず試したのが幅が狭い画面では表を展開！ stacktable.jsの使い方です。わかりやすそうだと思ったのですが、実際に表示させてみると、【ネットビジネス便利ツール】のテーブルではわかりやすくはなりませんでした。
【ネットビジネス便利ツール】のテーブル殆どが2列のデータです。stacktable.jsはもっとデータ数の多いテーブルに良さそうです。

次に試したのがスマホでtableタグを見やすくするCSSのように1列に表示する方法です。
仕組みはtableレイアウトをCSSだけでレスポンシブ化する方法がわかりやすいかもしれません。


文字数が少なく、余裕がある場合はスマートフォンでも通常の表を表示します。
PC・タブレット時。


スマートフォン時。



文字が折り返されて読みにくくなる場合は1カラム化します。
PC・タブレット時は通常の表を表示します。


スマートフォン時は1カラムで縦に表示します。


cssは基本的にはモバイルファーストで書いていますが、テーブルはPCを元にして1カラム化しているのでPCファーストで書いています。

html -------------------------------------------------

<table id="table1" class="responsive">

	<thead>

		<tr>

			<th class="koumoku">項目名</th>

			<th>説明</th>

		</tr>

	</thead>

  

	<tbody>

		<tr>

			<td class="background">項目1</td>

			<td>項目1の説明</td>

		</tr>

  

		<tr>

			<td class="background">項目2</td>

			<td>項目2の説明</td>

		</tr>

	</tbody>

</table>

------------------------------------------------------

css ---------------------------------------------------

#table1 .koumoku {

	width: 150px;

}



@media (max-width: 599px) {

	#table1 .koumoku {

		width: auto;

	}



	.responsive {

		border-collapse: separate;

		border-spacing: 0  20px;

	}

	

	.responsive thead {

		display: none;

	}

	

	.responsive td {

		border: none;

		display: block;

		width: 100%;

		box-sizing: border-box;

		border-bottom: 1px solid #dddddd;

	}

	

	.responsive td.background {

		background-color: #d9d9d9;

	}



	.responsive td:before {

		content: attr(data-title) " ";

	}

}

------------------------------------------------------

【ネットビジネス便利ツール】のテーブルは何とかなりました。販売しているツールの管理画面ではテーブルを多用しているし、複雑です。どうしたら読みやすいかな。少しずつでも改善していこう。