2

行ごとに列数が異なる HTML テーブルがあります。それにもかかわらず、列を行内で等間隔に配置したいと思います。(たとえば、最初の行に 2 つの列が含まれている場合、各列はテーブルの合計幅の 50% である必要があります。2 番目の行に 3 つの列がある場合、それぞれの列はテーブルの合計幅の ~33% である必要があります。 )

さらに、テーブルにコンテナーの幅を持たせたいと思います (おそらくwidth: 100%CSS の a を使用しますが、問題は、このプロパティが最初の行のみにあるものに基づいて列を均等に分割するようにテーブルに指示することです)。コンテナーの幅は異なる場合があるため、パーセンテージを使用する必要があります。

また、div を使用して、各 "cell-div" の幅をパーセンテージで指定することにより、テーブルを自分で作成しようとしましたが、この解決策はすべてのブラウザーで良い結果をもたらすわけではありません。行の最後の「cell-div」がその下に入ります。(境界線にもスペースが必要なため、 49.99998%orなどの奇妙な幅を指定する必要があります。)33.333233%

4

3 に答える 3

5

要素を実際に使用してtable表形式のデータを表示するのではなく、配置のためだけに聞こえます。必要な結果を得る 1 つの方法は、各行を独自のテーブルにして、幅を設定することです。各行は、表の幅全体にセルを均等に分散します。希望どおりに動作させるには、CSS フォーマットを追加する必要がある場合があります。

これはhttp://jsfiddle.net/RxSe5/1/で確認できます。

于 2012-04-29T03:23:25.923 に答える
2

各 TD 内にテーブルを追加できます。

    <table style="width:100%;text-align:center;">
        <tr>
            <td>
                <table style="width:100%">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width:100%">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
​

または、新しいテーブルを追加することもできます:

<div>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <table style="width:100%;text-align:center;">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
</div>​
于 2012-04-29T03:23:43.247 に答える
1

テーブルを完全にネストすることも、テーブルをレイアウトに使用することもできます。または、正しいことを行うだけで、マークアップを本来の使用方法で使用し、その作業のすべての成果 (アクセシビリティ、セマンティクス、ユーザビリティなど) を楽しむことができます。td 要素の colspan="" 属性を使用して列を変更できます。http://www.w3.org/TR/html-markup/td.html

于 2012-04-29T04:30:17.083 に答える