SYNCERのロゴ
アイキャッチ画像

テーブルの枠線の隙間をなくす方法

テーブルのセルに枠線を付けると、デフォルトでは隙間ができてしまいます。この隙間をなくすには、border-collapseにcollapseを指定します。

サンプルコード

table {
	border-collapse: collapse ;
}

デモ

スタイルあり

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
table {
	border-collapse: collapse ;
}

table, th, td {
	border: 1px solid #333 ;
}
	</style>
</head>
<body>
<table>
	<tbody>
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
	</tbody>
</table>
</body>
</html>

スタイルなし

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
table, th, td {
	border: 1px solid #333 ;
}
	</style>
</head>
<body>
<table>
	<tbody>
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
	</tbody>
</table>
</body>
</html>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。