Ich konnte nicht die Tabellen-Markup für diese Tabelle herauszufinden

Question

Ich habe versucht, diese Tabelle Layout mit rowspan und colspan für die letzten 2 Stunden und ich konnte es nicht herausgefunden, ich möchte sehen, wenn jemand dieses Rätsel lösen kann.

Answer 1

Lassen Sie diese Lösung überprüfen:

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

Hier ist ein Stift, wo man eine Arbeitslösung sehen: Codepen

I eine Farbe hinzugefügt, um es sichtbar zu machen. Ihnen dabei helfen Tabelle zu konstruieren, ist hier, wie ich es tat:

• Zuerst müssen Sie 4 Reihen.
• In der ersten werden Sie 4 Zellen haben, weil sie alle an der Spitze beginnen.
• Eine Zelle beginnt in der zweiten Zeile, Sie fügen also eine Zelle in der zweiten Zeile hinzu.
• Eine Zelle beginnt in der dritten Zeile, Sie fügen also eine Zelle in der dritten Zeile hinzu.
• Eine Zelle beginnt in der letzten Zeile, also fügen Sie eine Zelle in der letzten Zeile hinzu.
• Dann müssen Sie nur die rowspan="" entsprechend Ihrem Schema hinzufügen.

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>