記事参照

No.4 2009/12/06 16:05
題:Re: 表の列をグループ化して他の列と設定を変えたいのですが。
名:みや

> colgroupというのは、スタイルシートで設定することはできないようなので
いえ、設定できますよ。

> スタイルシート上では、表の本文の背景色は、白に定義してあります。
> しかし、このページでは、背景色を変えたいので
スタイルシートのclassなどで細かく設定できますので試してみては?

tbody の色指定を外した状態で、
■CSS
table colgroup{padding:3px;}
/* 背景に着色する行・列 */
table colgroup.test1{background:#008000;width:75%;}
table colgroup.test2{background:#00f000;width:25%;}/* 区別のために色を変えていま */
/* 背景色は白の行・列 */
table colgroup.test3{background:#444;width:75%;}/* 区別のために色を変えています */
table colgroup.test4{background:#ffffff;width:25%;}

■HTML
<table>
<caption>男子の好きな食べ物</caption>
<colgroup class="test1"></colgroup>
<colgroup class="test2"></colgroup>
<thead>
<tr>
<th>理 由</th>
<th>名 前</th>
</tr>
</thead>
<tbody>
<tr>
<td>ソフトクリーム。バニラの香りは、大人の香りですね。</td>
<td>華男</td>
</tr>
</tbody>
</table>

<table>
<caption>男子の好きな食べ物2</caption>
<colgroup class="test3"></colgroup>
<colgroup class="test4"></colgroup>
<thead>
<tr>
<th>理 由</th>
<th>名 前</th>
</tr>
</thead>
<tbody>
<tr>
<td>ソフトクリーム。バニラの香りは、大人の香りですね。</td>
<td>華男</td>
</tr>
</tbody>
</table>
※テストページ http://zxcvb.zatunen.com/



掲示板に戻る