【CSS】テーブルの線が二重になってしまう!1pxにしたい!

デザイン

css_table_border

borderだけ指定してもテーブルの枠線は二重になってしまいますので
もう一押しが必要です。

<table class="table">
<tr>
	<td>◯◯◯◯</td>
	<td>△△△△</td>
	<td>☆☆☆☆</td>
</tr>
<tr>
	<td>◯◯◯◯</td>
	<td>△△△△</td>
	<td>☆☆☆☆</td>
</tr>
<tr>
	<td>◯◯◯◯</td>
	<td>△△△△</td>
	<td>☆☆☆☆</td>
</tr>
</table>
.table, .table td, .table th {
	border-collapse: collapse; /* 1pxにする */
	border: 1px solid #666;
}

css_table_border_sample02

border-collapse に collapse を指定することで枠線内の余白をなくし、
1pxに見せることができます。

デザイン

関連記事