質問
<table/>
要素を使用して、<col/>
の列をフォーマットしようとしています。 background-color
、width
などを設定できますが、font-weight
を設定できません。なぜ機能しないのですか?
<table>
<col style="font-weight:bold; background-color:#CCC;">
<col>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
解決
私が知る限り、<col>
要素でCSSを使用してフォーマットできるのは次のとおりです。
- 背景色
- border
- 幅
- 可視性
このページには詳細が記載されています。
ハーブは正しい-<td>
を直接スタイルする方が良い。私は次のことをしています:
<style type="text/css">
#mytable tr > td:first-child { color: red;} /* first column */
#mytable tr > td:first-child + td { color: green;} /* second column */
#mytable tr > td:first-child + td + td { color: blue;} /* third column */
</style>
</head>
<body>
<table id="mytable">
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
<tr>
<td>text 4</td>
<td>text 5</td>
<td>text 6</td>
</tr>
</table>
ただし、これはIEでは機能しません。
他のヒント
最善の方法は、スタイリングを<td>
タグに直接適用することです。 <col>
タグを使用したことはありませんが、ほとんどのブラウザーでは<table>
および<th>
/ <=>レベルでフォーマットを適用できますが、中間レベルでは適用できません。たとえば、あなたが持っている場合
<table>
<tr class="Highlight">
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
このCSSは機能しません
tr.Highlight { background:yellow }
しかし、これは
tr.Highlight td { background:yellow }
また、上記のコードはデモンストレーションのみを目的としており、実際にスタイルをインラインで適用することはありません。
これが必要だったかもしれません:
tr td:first-child label {
font-weight: bold;
}
最初の列が太字のテキストになり、他の4つの列が通常のテキストになるようにテーブルのスタイルを設定しようとしていたので、これを読んでください。
colタグを使用するのは良い方法のように思えましたが、width属性を使用して列の幅を設定することはできましたが、font-weight:boldは機能しませんでした
ソリューションの方向性を教えてくれてありがとう。
すべてのtd要素td {font-weight: bold;}
をスタイリングし、隣接する兄弟セレクターを使用して列2〜5を選択し、通常のtd + td {font-weight: normal;}
にスタイルを戻す
出来上がり、すべて良いです:)
CSSクラスを介してスタイルを適用しようとしましたか?
次のように動作するようです:
<style type="text/css">
.xx {
background: yellow;
color: red;
font-weight: bold;
padding: 0 30px;
text-align: right;
}
<table border="1">
<col width="150" />
<col width="50" class="xx" />
<col width="80" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
col
タグはcolgroup
タグ内にある必要があります。これは問題に関係している可能性があります。