0

我需要有关 HTML 布局的帮助。

我需要为每个表格行显示 3 列

Column#1 里面只有一些文字

Column#2 有一个内表，有 1 行或 2 行，具体取决于 Column#3 的内容

Column#3 有 x 行，行中的每个单词都有一个食物的名称。首先列出健康物品，然后列出不健康物品（如果有）。如果只有健康项目，则第 2 列将有 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 回答