如何使三个单元格在一个单元格在一个表中

我写了这个代码：如何使三个单元格在一个单元格在一个表中

<html> 
    <head> 
    <title></title> 
    </head> 
    <body> 
    <style> 
    table, th, td { 
    border: 1px solid black; 
    width: 700px; 
    margin: auto; 
    } 

    </style> 
    <table> 
    <tr> 
    <td> a </td> 
    <td> b </td> 
    <td> c </td> 
    </tr> 
    <tr> 
    <td> a </td> 
    <td> </td> 
    <td> c </td> 
    </tr> 
    <tr> 
    <td> a </td> 
    <td> </td> 
    <td> c </td> 
    </tr> 
    </table> 
    </body> 
    </html>

这将产生一个表，看起来像这样：

---------------------------------- 
|a  |  b  |  c | 
---------------------------------- 
|a  |   |  c | 
---------------------------------- 
|a  |   |  c | 
----------------------------------

但我要的是一个表结构像这样：

---------------------------------- 
|a  |  b  |  c | 
----------   ------------ 
|a  |   |  c | 
----------   ------------ 
|a  |   |  c | 
----------------------------------

其中中间列的行被合并。我怎样才能做到这一点？

感谢

来源

2016-05-06 JAMES

可以使用属性rowspan为td里面的B。

<table border="1"> 
    <tr> 
     <td>a</td> 
     <td rowspan="3">b</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>c</td> 
    </tr> 
</table>

然后，您可以添加CSS将其调整的方式你喜欢它：

table{ 
    text-align: center; 
    width: 100%; 
}

下面是一个例子：https://jsfiddle.net/sntgoy5d/

如果你想在B处的顶部单元格，您可以使用css属性vertical-align并将其设置为top。

来源

2016-05-06 18:27:07

您可能想要将'style =“vertical-align：top”'添加到您正在放置'rowspan =“3”'的'td'上。 –

@ P.Gearman哈哈是啊，我正在编辑帖子以添加它作为评论。 –

嗯，你打我回答这个问题（而且比我想的要好得多），所以这都很好。：P –

如何使三个单元格在一个单元格在一个表中

回答

相关问题