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/

在html表中使用colspan组合rowspan

1 个答案: