在html表中结合rowspan和colspan

Question

我想将所有 3 个 5 组合为左侧 1，将所有 1 组合为左侧 3，并将所有 6 组合为左上角 4。有人可以帮我解决这个问题吗？我知道我应该使用 col span 和 row span 但在我的解决方案中 2 行将消失，所以我现在不知道如何解决它。

<div class="table-body">
  <div class="row">
    <div class="col-md-2"></div>
    <table class="col-md-8 table table-bordered">
      <tbody>
        <tr>
          <td colspan="4" rowspan="5">4</td>
          <td colspan="2" rowspan="3">1</td>
          <td colspan="2">5</td>
        </tr>
        <tr>
          <td colspan="2">5</td>
        </tr>
        <tr>
          <td colspan="2">5</td>
        </tr>
        <tr>
          <td colspan="4">6</td>
        </tr>
        <tr>
          <td colspan="4">6</td>
        </tr>
        <tr>
          <td colspan="2" rowspan="3">3</td>
          <td colspan="2">1</td>
          <td colspan="4">6</td>
        </tr>
        <tr>
          <td colspan="2">1</td>
          <td colspan="4">6</td>
        </tr>
        <tr>
          <td colspan="2">1</td>
          <td colspan="4">6</td>
        </tr>
      </tbody>
    </table>
    <div class="col-md-2"></div>
  </div>
</div>

Answer 1

这是一个 JSFiddle https://jsfiddle.net/7zt7vwmd/5/

<div class="table-body">
  <div class="row">
    <div class="col-md-2"></div>
    <table class="col-md-8 table table-bordered">
      <tbody>
        <tr>
          <td colspan="4" rowspan="5">4</td>
          <td colspan="2" rowspan="3">1</td>
          <td colspan="2" rowspan="3">5</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
          <td colspan="4" rowspan="5">6</td>
        </tr>
        <tr>
        </tr>
        <tr>
          <td colspan="2" rowspan="3">3</td>
          <td colspan="2" rowspan="3">1</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
      </tbody>
    </table>
    <div class="col-md-2"></div>
  </div>
</div>

我认为这就是您要描述的效果。除非您与表格结婚，否则您可能需要查看 CSS 网格来显示您的数据。 https://css-tricks.com/snippets/css/complete-guide-grid/