html - HTMLテーブルを使用可能な幅の100％にする

Question

私は実際に認めるのが恥ずかしいという奇妙な問題を抱えています。ここですべてを参照してください： http://jsfiddle.net/Sorcy/ng2by/1/

私の問題は次のとおりです。2 番目の (非常に小さい) テーブルは、実際にはコンテナーの幅全体を伸ばす必要があります。firebugで見るとそうです（したがって、実際にはテーブルの背景色である右側の青いボックス）が、行自体はコンテンツを収容するために必要な範囲でしか伸びません.

テーブルの横に大きな青いボックスを置きたくないので、これを幅全体に広げるにはどうすればよいですか? テーブル行の幅を設定しても何ももたらされませんでした。また、テーブルの列数を事前に知ることができないため、セルの幅を設定することも問題外です。

私がこれまでに持っている唯一の解決策は、テーブルを通過し、列を数え、それぞれの幅をオンザフライで設定する小さな Javascript を作成することですが、もちろん、純粋な CSS ソリューションの方がはるかに優れています。

編集：

要求に応じて、どのように見えるかのイメージ: テーブルはどのように見えるべきか

score 3 · Accepted Answer

主な問題はこれだと思います：

table {
    display: block;
}

テーブルのプロパティを変更すると、display基本的にブラウザにそれがテーブルであることを無視して通常の要素として処理するように要求することになり、予測できない癖が発生します。

あなたが何を達成しようとしていたのかはわかりませんが、あなたが本当にこれを望んでいた可能性があります:

table {
    border-collapse: collapse;
}

この属性により、特定のビジュアルデザインを簡単に実現できます。

更新 #1:テーブルの最後の行の後の暗い線は、この単純なスタイルで実行できます。

table {
    /*background-color: #001F66;*/
    border-bottom: 1px solid #001F66;
}

更新 #2:最後の行のセルがこれを置き換えた後に暗い線を取得するには:

table tr:last-child td { border-bottom: none; }

... これとともに：

table tr:last-child td { border-bottom: 1px solid #001F66; }

1 に答える 1