web-dev-qa-db-ja.com

HTMLテーブルのcolgroup要素が機能していませんか？

テーブルの各列に異なるスタイルが必要です。 <colgroup>または<col>を使用してそれができると読みましたが、運がありませんでした。私は例 here を持っていますが、何も変更されていないようです。私は何か間違ったことをしていますか？これはxhtmlで動作しますか？

各<td>に「クラス」属性を追加できることは知っていますが、それは弱いようです。

htmlcsshtml-table
30
pleasedontbelong

そのとおりです。 colgroup自体はすべてのブラウザーでサポートされていますが、 これは内部のcol要素の属性には当てはまりません です。可能な属性のうち、すべてのブラウザでサポートされているのはwidthだけです。しかし、CSSとは異なり、<col width="">は、ピクセルとパーセンテージの幅のみをサポートしています。

使用しないでください。代わりに、CSSクラスを作成し、各tdに割り当てます。はい、それは吸います。

[〜＃〜] edit [〜＃〜]より詳細な情報が記載されたページに上記のリンクを更新しました

36
Aaron Digulla

table-layout固定ではなく自動に...

table {table-layout: auto;}

私の個人用サイトは複数のテーマをサポートしており、このような違いが常に見られます。

6
John

CSSセレクターを使用して、クラスを追加せずに同様の結果を得ることができます。

例として、2番目の列に特定のスタイルを与えたい場合は、以下を使用できます。

table>tbody>td:nth-child(2){font-weight: bolder;}
1
ramjamx

反応制限なしで本当にcolsタグを使用する必要がある場合は、dangerouslySetInnerHTMLが役立ちます。

<colgroup dangerouslySetInnerHTML={{
  __html: `
    <col style="background: red;"/>
    <col style="width: 20px;"/>
  `
}}/>

これは機能しますが、reactを使用する推奨方法ではありません。

0
Soufiane Ghzal

だから私はこれと同じ問題を抱えていました...本当の問題は、HTML属性ではなくCSSクラスが使用されている場合でも、以下のスタイルしかできないことです：

  • 幅
  • 国境
  • 背景色
  • 可視性

出典：https://www.w3.org/TR/CSS21/tables.html#columns

0
Rob Kovacs