文章/答案/技术大牛

发布

社区首页 >问答首页 >如何设置我的HTML表格布局

问如何设置我的HTML表格布局
EN

Stack Overflow用户

提问于 2012-07-13 03:13:34

回答 1查看 293关注 0票数 0

我需要一个HTML布局的帮助。

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

Column#1里面只有一些文本

根据Column#3的内容，Column#2有一个内部表，其中包含1行或2行

Column#3有x行，行中的每个单词都有一个食品项目的名称。健康项目首先列出，然后(如果有)不健康项目列出。如果只有健康的项目，column#2会有一行包含“健康”一词。否则，它将显示健康，并且第二行将显示不健康(并且它必须与column#3对齐)

所以它看起来像这样：

Column#2        Column#3
HEATHLY         Apple
                Pear

或者它可能看起来像这样：

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

第2列和column#3中的每一行都应该有每一行的网格(顶部/底部边框)。

我该怎么做呢？

注意: column#2中的行框应该与column#3中的行框对齐。

我希望我已经解释得足够清楚了。

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-13 03:38:17

我不确定你特别要求的是什么，所以这里是这样的：

<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>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11458982

复制

相似问题

问如何设置我的HTML表格布局
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置我的HTML表格布局EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置我的HTML表格布局
EN