2008年5月6日火曜日

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

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

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

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

080506-1

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 )

1コメント:

匿名 さんのコメント...

興味深く拝見しました。

この場合、1行全体の下の部分の枠を太くしたいと考え、trタグ内に

   class="A"

を入れたら、IE7では、アウトでしたが、FireFoxやchromeではOK。
やはり、IE7は、少し遅れているんですね。