問題タブ [colgroup]

colgroup を動的に生成し、各グループを背景色でスタイルします。各グループの上にラベルを追加する方法はありますか?

私のcolgroupは次のようになります：

そして、これがどのようにレンダリングされるかです：

各グループの上にラベルを付けるにはどうすればよいですか? そのような変更を行うためにそれらを選択することはできないので、jQuery API またはそのためのプラグインさえあるのでしょうか?

colgroups境界線を配置したいくつかの HTML テーブルがあります。隣接するグループ間にスペースを追加したいと思います。グループ間に空のセルを追加せずに CSS でこれを行う方法はありますか?

望ましい出力は次のようになります。

編集

これまでのところ、css だけでこれを行う方法はないようです。誰かがこれを達成する答えを持っているかどうかを待ちますが、今のところ、スペーサーセル法を使用しています. 理想的ではありませんが、比較的きれいに見えるソリューションです。これが実際の例です：

http://jsfiddle.net/7ps6cuss/3/

問題: 2 列のテーブルのすべてのテーブル セルの幅を 50% にする必要がありますが、単一セルのテーブルがある場合、通常のセル ルールは適用されません。テーブルが 100% であるため、100% になります。私のCSSは次のようになります。

考えられるすべての CSS の組み合わせを試してみたところ、灘が得られました。私はこれのためにCSSをあきらめました。

そのため、マークアップにセルが 1 つしか存在しない場合でも、テーブルに 2 つのセルを強制的に表示させたいと考えています。でそれをやろうとしていますが<colgroup> <col span="2"> </colgroup>、どちらも機能していないようです。

質問:テーブル セルが 1 つしか存在しない場合に、テーブルに 2 つのテーブル セルを表示させるにはどうすればよいですか?

JS フィドル: http://jsfiddle.net/uryvmz57/

CSS とプレーン HTML の組み合わせを使用して、3 つの列グループを持つテーブルを取得しようとしています。グループに垂直方向のルールのみを持たせたい:

これが私がこれまでに持っているものです：

これにより、すべての列で垂直方向のルールが得られます。

解決策はIE 8に適しているはずなので、nth-childを避けようとしています。

私の最終的な目標は、最初の列がそのまま残り、他の列が水平方向にスクロールするテーブルを作成することです。他の解決策をいくつか見つけましたが、なぜ colgroup と absolute が一緒に機能しないように見えるのか興味があります。

html

CSS

位置のコメントを外して離れると、赤い色が表示されなくなりました。