如何使我的表看起来像这样

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页的表。

另一种方法是使用一个表，但是随后而不是表格单元格使用一个无序列表里面边框。

希望这可以帮助您在正确的方向