HTML&CSS

htmlのtableで悩むあれこれを解説【borderは？スマホ表示は？】

htmlのtableタグに関する疑問を解決
ニャンコ
ニャンコ

htmlのtableが思った通りに動かないよ～

tableは便利だけど、確かに他のタグとは違って特殊なところあるよね。
よく疑問に思うようなところを解説していくね。

ワンコ
ワンコ

tableのborderを奇麗に引くには？

tableの線を奇麗に揃えるには、「border-collapse: collapse;」を指定しよう。

ワンコ
ワンコ

「border-collaps」プロパティ

「border-collapse」プロパティは、テーブルのセル同士を結合するか、分離するかを指定するプロパティです。

separate（初期値）

隣接するセルが個別に境界線を持ちます。
こちらが初期値になりますので、何も指定しなければこちらが設定されます。

試しに、テーブルに線を引いて見てみましょう。

table th {
	padding: 10px;
	border: 1px solid #E0E1E3;
}
table td {
	padding: 10px;
	border: 1px solid #E0E1E3;
}
ID 名前 種族 特技 備考
1 うぇぶ ねこ 仮想通貨取引 得になし
2 さいと いぬ ビットコインのマイニング ビットコインで大損
3 ほーむ ねこ デイトレード 得になし
ニャンコ
ニャンコ

セルが個別に境界線を持ってるから、隙間が空いてるように見える～

collapse

隣接するセルの境界線を合体させることができます。
「collapse」をtableタグに指定してみましょう。

table {
    border-collapse: collapse;
}
ID 名前 種族 特技 備考
1 うぇぶ ねこ 仮想通貨取引 得になし
2 さいと いぬ ビットコインのマイニング ビットコインで大損
3 ほーむ ねこ デイトレード 得になし

境界線が合体したので、線も重なっています。
これで、テーブルにきれいに線が引けました。

ワンコ
ワンコ

スマホ画面のテーブルはどうする？

ニャンコ
ニャンコ

PCの時はいいのに、スマホの時テーブルが入らないよ～

スマホは横幅が狭いからどうしてもそのままじゃダメだね。
どうするかを考えよう。

ワンコ
ワンコ

縦置きにする

これは下記のような横向きのテーブルなどで使用できる方法です。
PCの時は、そのまま横表示にしてスマホの時は縦型にします。

ID 1 2 3
名前 うぇぶ さいと ほーむ
種族 ねこ いぬ ねこ

横幅を狭くして、スマホ画面を再現しています。
こうして縦向きにすれば、スマホでも見やすいですね。

ID 1 2 3
名前 うぇぶ さいと ほーむ
種族 ねこ いぬ ねこ

やり方は、td、thそれぞれに「display:block」を設定してあげると、縦方向に並びます。

table td ,
table th {
   display:block;
}

スクロールさせる

tableの横幅はそのままに、それを囲む要素に「overflow-x: scroll;」を設定し、スクロールできるようにします。

ID 名前 種族 特技 備考
1 うぇぶ ねこ 仮想通貨取引 得になし
2 さいと いぬ ビットコインのマイニング ビットコインで大損
3 ほーむ ねこ デイトレード 得になし 
<div class="table_wrap ">
	<table>
		<thead>
			<tr>
				<th>ID</th>
				<th>名前</th>
				<th>種族</th>
				<th>特技</th>
				<th>備考</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>うぇぶ</td>
				<td>ねこ</td>
				<td>仮想通貨取引</td>
				<td>得になし</td>
			</tr>
			<tr>
				<td>2</td>
				<td>さいと</td>
				<td>いぬ</td>
				<td>ビットコインのマイニング</td>
				<td>ビットコインで大損</td>
			</tr>
			<tr>
				<td>3</td>
				<td>ほーむ</td>
				<td>ねこ</td>
				<td>デイトレード</td>
				<td>得になし</td>
			</tr>
		</tbody>
	</table>
</div>

・ポイントとしては、tableに横幅を指定すること
・それを「overflow-x: scroll;」を持つクラスで囲うことです。

.table_wrap {
	overflow-x: scroll;
}
.table_wrap table {
	width: 635px;
}

列幅を均等に揃える

こちらは、以前の記事で詳しく解説していますので、こちらをご参考ください。

関連記事

-HTML&CSS
-, ,