如何使我的表看起來像這樣

Question

好吧，我知道這看起來奇怪，但我怎樣才能使我的HTML表格這個樣子？

我要的是兩人在長度在一開始，然後是三個。

_ _ 
| ||_| 
|-||_| 
|_||_| 

我已經試過幾件事情了，但它只是每次jsfiddle.net/uyvx0mL9

Answer 1

更新

這是一個更好的版本比表在表

table { 
 
    border-collapse:collapse; 
 
    border-spacing:0; 
 
    width: 100px; 
 
} 
 

 
th, td { 
 
    padding:10px 5px; 
 
    border: 1px solid; 
 
}

<table> 
 
    <tr> 
 
    <th rowspan="3"></th> 
 
    <th rowspan="2"></th> 
 
    </tr> 
 
    <tr> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="2"></td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="3"></td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="2"></td> 
 
    </tr> 
 
    <tr> 
 
    </tr> 
 
</table>

的表走臺式版本

td { 
 
    border: 1px solid 
 
}

<table> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td rowspan="2"> 
 

 
     <table> 
 
     <tr> 
 
      <td>Text</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Text</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Text</td> 
 
     </tr> 
 
     </table> 
 

 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text</td> 
 
    </tr> 
 
</table>

Answer 2

看起來時髦的可能是這可以幫助。

<table border="1"> 
<tbody> 
    <tr> 
     <td rowspan="2">Row 1</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Row 2</td> 
     <td>Text</td> 
    </tr> 
</tbody> 
</table> 

Answer 3

你有沒有聽說過的CSS屬性顯示：表？

這裏是一個偉大的教程，看的可能性： http://colintoh.com/blog/display-table-anti-hero

爲了您的具體問題，你可以把左，右，好像他們是兩個獨立的1頁的表。

另一種方法是使用一個表，但是隨後而不是表格單元格使用一個無序列表裏面邊框。

希望這可以幫助您在正確的方向