<h2>やりたかったこと</h2>
<pre class="language-html"><code class="language-html">&#x3C;table>
 &#x3C;colgroup span="1" style="padding:10px; background:#66c; color:#fff; text-align: center;" />
 &#x3C;tbody>
 &#x3C;tr>
 &#x3C;td>10&#x3C;/td>
 &#x3C;td>foo&#x3C;/td>
 &#x3C;/tr>
 &#x3C;tr>
 &#x3C;td>20&#x3C;/td>
 &#x3C;td>bar&#x3C;/td>
 &#x3C;/tr>
 &#x3C;tr>
 &#x3C;td>30&#x3C;/td>
 &#x3C;td>baz&#x3C;/td>
 &#x3C;/tr>
 &#x3C;/tbody>
&#x3C;/table>
</code></pre>
という HTML を書いた際に、縦 1 列目に padding, background, color, text-align の指定が適用される想定でした。
<h2>問題</h2>
<a href="http://jsbin.com/xaleva/4/edit?html,output">上記の HTML を書いた JS Bin</a>を見ると分かるように、background の指定以外は適用されていません。なぜ？
<h2>分かったこと</h2>
<a href="http://www.w3.org/TR/CSS21/tables.html#columns">W3C の CSS 2.1 の仕様書内にある Tables 17.3 Columns</a>を見ると分かるのですが、table-column や table-column-group のプロパティが指定されている要素(col 要素と colgroup 要素)には、下記 4 つのプロパティのみ指定できるようです。
<ul>
<li>border
<ul>
<li>table 要素に<code>border-collapse: collapse;</code>が指定されている時のみ適用される</li>
</ul>
</li>
<li>background</li>
<li>width</li>
<li>visibility</li>
</ul>
<h2>まとめ</h2>
自分が適用したかったスタイルは colgroup 要素や col 要素では適用できないことが分かったので、colgroup 要素や col 要素は使わないことにしました。
その代わりに、縦 1 列目に class を指定して、その class に適用したかったスタイルを指定することにしました。

学ぶ、考える、書き出す。

タグ「HTML」の記事一覧