我無法弄清楚表格標記該表

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>