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

Question

好吧，我知道这看起来很奇怪，但是如何让我的HTML表格看起来像这样呢？

我想要的是开头两个长度，然后是三个。

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

我已经尝试了几件事，但每次jsfiddle.net/uyvx0mL9看起来都很时髦

Answer 1

你听说过CSS属性显示：table？

这是一个很棒的教程，可以看到它们的可能性： http://colintoh.com/blog/display-table-anti-hero

对于您的特定问题，您可以将左侧和右侧视为两个单独的1列表。

另一种方法是使用一个表，但是然后使用带有边框的无序列表而不是表格单元格。

希望这可以帮助您朝着正确的方向前进

Answer 2

更新

这是一个比table-in-table更好的版本

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 3

可能会有所帮助。

<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>