HTML のテーブルで一部の枠だけ太くする

1. テーブルの特定の枠を太くしたい

HTML のテーブルを作成する。このとき、特定のテーブル枠を太くしたい

例えば、以下のテーブルにある hoge, piyopiyo の値の入ったセルの下枠を太くしたい。

2. 方法

太くしたいセルの class 属性の値を適当に "A" とした。

<table>
	<tr>
		<td class="A">hoge</td>
		<td>piyo</td>
	</tr>
	<tr>
		<td>hogehoge</td>
		<td class="A">piyopiyo</td>
	</tr>
	<tr>
		<td>fuga</td>
		<td>fugafuga</td>
	</tr>
</table>

CSS で border-bottom を指定することによって、特定の class が指定されたテーブルの枠を太くしている。

table {border-collapse: collapse;}
td {width: 200px;}

table, td {
	border: solid 1px;
}

.A{
	background-color: #fafafa;
	border-bottom: solid 3px;
}

テーブルの枠の隙間をなくすために border-collapse を指定。また、幅を固定とした。

 

3. 問題

collapse を指定した場合、IE7 では テーブルの外枠を太くすることはできなかった。また、 colgropu を使用して列の枠に対して適用した場合も、 IE7 ではだめだった。 (Firefox では ok )