0

2 つの列を持つテーブルがあります。ヘッダーの幅を 30% に設定して、最初の列の幅を設定します。

#TableFirstHeader
{
    width: 30%;
}

これはうまく機能しますが、2 番目のヘッダーの幅を 65% に設定しようとすると、次のようになります。

#TableSecondHeader
{
    width: 65%;
}

それは単に無視されます。その値は何にでも設定でき、2 番目の列は常にテーブルの最後まで伸びます。

私が本当に欲しいのは、テーブルの 2 番目の列と右側の間に約 5% のギャップがあることだけです。

幅 5% のヘッダーを設定して空の列を作成しようとしましたが、何もしません。

その列を使用可能な合計幅の 65% のみを使用するようにするにはどうすればよいですか (または、使用可能な幅の 90% のように、それも問題ありません)。

4

2 に答える 2

2 
<style type="text/css">
    table#YourTableId { width:95%; }
    th#TableFirstHeader { width:31.6%; }
    th#TableSecondHeader { width:68.4%; }
</style>

2 番目の th には必ずしも幅を割り当てる必要はありません。また、使用できます

    table#YourTableId td:first-child { width:31.6%; }

代わりは。好みの問題。

ここから編集：

上記のコメントで明確にしたので、何らかの理由で、行はテーブルのコンテナーの幅の 100% である必要があるため、最後の列に余分なパディングがある場合は、jeroen のソリューションを 2 番目に使用します。

2 番目の列をテーブルの幅の 65% にする必要がある場合 (右パディングが 5% の 70% ではありません):

<style type="text/css">
    th#TableFirstHeader { width:30%; }
    th#TableSecondHeader { width:65%; }
    th#TableThirdHeader { width:5%; }
    div#Stretch { width:100%; }
</style>

<table>
    <tr>
    <th id="TableFirstHeader">Some Content</th>
    <th id="TableSecondHeader">Some Content</th>
    <th id="TableThirdHeader"><div id="Stretch"></div></th>
    </tr>
</table>

空の 3 列目は折りたたまれます。コンテナーの幅が 100% の空の div は、その動作を防ぎます。

于 2011-05-20T14:10:04.527 に答える
1

テーブルのすべての列を組み合わせてテーブルの幅を構成することはできません。

何を達成しようとしているのか正確にはわかりませんが、最後の列のセルに適切なパディングを追加して、必要な効果などを得ることができます。

于 2011-05-20T13:57:44.703 に答える