0

HTMLレイアウトについてサポートが必要です。

テーブルの行ごとに3つの列を表示する必要があります

列＃1にはテキストが含まれています

列＃2には、列＃3の内容に応じて1行または2行の内部テーブルがあります。

列＃3行数はxで、行の各単語には食品の名前があります。健康的なアイテムが最初にリストされ、（もしあれば）不健康なアイテムがリストされます。健康的なアイテムのみがある場合、列＃2には「HEALTHY」という単語が含まれる1行が含まれます。それ以外の場合は、HEALTHYと表示され、2行目はUNHEALTHYになります（列＃3と整列する必要があります）

したがって、次のようになります。

Column#2        Column#3
HEATHLY         Apple
                Pear

または、次のようになります。

Column#2        Column#3
HEATHLY         Apple
                Pear
UNHEALTHY       Coffee crispt
                Chocolate milk

また、列＃2と列＃3の各行には、各行にグリッド（境界線の上部/下部）が必要です。

これどうやってするの？

注：列＃2の行の境界線は、列＃3の行の境界線と一致している必要があります。

私はこれを十分に明確に説明したと思います。

4

1 に答える 1

2

あなたが特に何を求めているのかわからないので、ここに行きます：

<table cellspacing="0">
    <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
    </tr>
    <tr>
        <td rowspan="4">Col 1 text goes here</td>
        <td rowspan="2">HEALTHY</td>
        <td>Apple</td>
    </tr>
    <tr>
        <td>Pear</td>
    </tr>
    <tr>
        <td rowspan="2">UNHEALTHY</td>
        <td>Toffee crisp</td>
    </tr>
    <tr>
        <td>Chocolate milk</td>
    </tr>
</table>

そしてそれを生成するためのいくつかの擬似コード：

foreach c2 in col-2-items
{
    foreach c3 in c2.col-3-items
    {
        <tr>
            if c3 is first in c2.col-3-items
            {
                if c2 is first in col-2-items
                {
                    <td rowspan="all-items.count">Col 1 text goes here</td>
                }
                <td rowspan="c2.col-3-items.count">c2.text</td>
            }
            <td>c3.text</td>
        </tr>
    }
}

cssで上下の境界線を適用します。表のcellspacing="0"にも注意してください。

<style>
table
{
    border-collapse: collapse;
}
td
{
    border-top: solid 1px black;
    border-bottom: solid 1px black;
}
</style>
于 2012-07-12T19:38:17.293 に答える