我无法弄清楚表格标记该表

Question

我试图使用布局和行跨度为合并单元格的最后2个小时本表，我无法弄清楚，我想看看如果有人能解决这个难题。

Answer 1

让我们检查这个解决方案：

HTML：

<table> 
    <tr> 
    <td rowspan=3>1.1</td> 
    <td>1.2</td> 
    <td rowspan=2>1.3</td> 
    <td rowspan=4>1.4</td> 
    </tr> 
    <tr> 
    <td rowspan=3>2.1</td> 
    <!--<td>2.2</td>--> 
    <!--<td>2.3</td>--> 
    <!--<td>2.4</td>--> 
    </tr> 
    <tr> 
    <!--<td>3.1</td>--> 
    <!--<td>3.2</td>--> 
    <td rowspan=2>3.3</td> 
    <!--<td>3.4</td>--> 
    </tr> 
    <tr> 
    <td >4.1</td> 
    <!--<td>4.2</td>--> 
    <!--<td>4.3</td>--> 
    <!--<td>4.4</td>--> 
    </tr> 
</table> 

CSS：

td { 
    border: 1px solid black; 
} 

tr { 
    height: 20px;//It only work for fixed height. Haven't found better solution yet 
} 

Answer 2

这里是一个猪圈里，你可以看到一个有效的解决方案： Codepen

我添加了一些颜色，使其可见。 为了帮助您构建表格，下面是我如何做到的：

• 首先，您有4行。
• 在第一个，你将有4个单元格，因为它们都从顶部开始。
• 一个单元格在第二行开始，因此，您在第二行添加一个单元格。
• 一个单元格在第三行开始，因此您在第三行添加一个单元格。
• 一个单元格从最后一行开始，因此您在最后一行添加了一个单元格。
• 然后，你只需要添加rowspan=""相应的你的计划。

table { 
 
    width:100%; 
 
    height: 400px; 
 
} 
 
tr:nth-child(1) td:nth-child(1){ 
 
    background: #cceeee; 
 
} 
 
tr:nth-child(1) td:nth-child(2){ 
 
    background: #eeccee; 
 
} 
 
tr:nth-child(2) td:nth-child(1){ 
 
    background: #eecccc; 
 
} 
 
tr:nth-child(1) td:nth-child(3){ 
 
    background: #ccccee; 
 
} 
 
tr:nth-child(3) td:nth-child(1){ 
 
    background: #eeccee; 
 
} 
 
tr:nth-child(4) td:nth-child(1){ 
 
    background: #eeccee; 
 
} 
 
tr:nth-child(1) td:nth-child(4){ 
 
    background: #cceecc; 
 
} 
 
tr{ 
 
    height:25%; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="3"> 
 
     </td> 
 
     <td> 
 
     </td> 
 
     <td rowspan="2"> 
 
     </td> 
 
     <td rowspan="4"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="3"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="2"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>