9

CSSでhtmlデータテーブルをレイアウトする必要があります。

表の実際の内容は異なる場合がありますが、常に 1 つのメイン列と 2 つ以上の他の列があります。メイン列の幅をその内容に関係なくできるだけ大きくし、他の列の幅をできるだけ小さくしたいと思います。内容が変更される可能性があるため、列の正確な幅を指定することはできません。

シンプルな意味的に有効なhtmlテーブルとcssのみを使用してこれを行うにはどうすればよいですか?

例えば：

| | メインコラム | 列 2 | 列 3 |
 <------------------ px 単位の固定幅 ------------------->
 <--------- できるだけ広く ---------->
 内容に応じて可能な限り薄くする: <-----> <-------->
4

3 に答える 3

8

Alexkのソリューションに似ていますが、状況によっては実装が少し簡単になる可能性があります。

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

white-space:nowrap折り返しを避けたい場合は、セルに適用することもできます。

于 2008-09-23T02:06:40.710 に答える
6

私はCSSの専門家ではありませんが、これは私にとってはうまくいきます（IE、FF、Safari、およびChromeで）：

td.zero_width {
    width: 1%;
}

次に、HTML で:

<td class="zero_width">...</td>
于 2008-09-23T01:38:07.517 に答える
1

width: 100%;固定幅のコンテナー div がないと、意図した結果が得られないように思われるため、成功していません。代わりに、次のようなものを使用すると、最良の結果が得られるようです。

.column-fill { min-width: 325px; }

このようにして、必要に応じて大きくすることができます。ブラウザは、このように設定された列にすべての余分なスペースを与えるようです. それが誰にとってもうまくいくかどうかはわかりませんが、私にとってはクロムでうまくいきました（他の人は試していません）...試してみる価値があります。

于 2013-05-31T18:35:36.160 に答える