在表

Question

我正在尝试创建以下发行版，但我不知道如何组织编号3和4.我使用的是rowspan作为编号3.但是编号4，它移动到第二列，因为编号3正在使用的地方。

我该如何解决？

<table class="table table-bordered table-striped">
<!-- Table heading -->
<thead>
    <tr>
        <th class="center">1</th>
        <th class="center">2</th>
    </tr>
</thead>
<!-- // Table heading END -->

<!-- Table body -->
<tbody>

    <tr>
        <td rowspan="2">3</td>
        <td>5</td>
    </tr>
    <tr>
        <td rowspan="2">4</td>
        <td>6</td>
    </tr>
    <tr>
        <td></td>
        <td>7</td>
    </tr>

</tbody>
<!-- // Table body END -->
</table>

Answer 1

只需为rowspan添加空行即可获得空格

<table class="table table-bordered table-striped" border=1>
<!-- Table heading -->
<thead>
    <tr>
        <th class="center">1</th>
        <th class="center">2</th>
    </tr>
</thead>
<!-- // Table heading END -->

<!-- Table body -->
<tbody>

    <tr>
        <td rowspan="2">3</td>
        <td>5</td>
    </tr>
    <tr></tr>
    <tr>
        <td rowspan="2">4</td>
        <td>6</td>
    </tr>
    <tr></tr>
    <tr>
        <td></td>
        <td>7</td>
    </tr>

</tbody>
<!-- // Table body END -->
</table>

正如您所看到的，使用表格排列项目并不是很困难。最好使用<div>网格系统

.row, .box {
  box-sizing: border-box;
}

.row {
  margin-bottom: 10px;
}

.row:after {
  content: '';
  display: table;
  clear: both;
}

.box {
  float: left;
  width: 50%;
  height: 50px;
  vertical-align: top;
  border: 1px solid black;
}

.box.double {
  height: 100px;
}

<div class="row">
  <div class="box double">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<div class="row">
  <div class="box double">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

Answer 2

尝试以下代码。正如您使用rowspan所以我添加了一行作为td值xyz。请检查。

希望这可以帮到你。

＆＃13;

＆＃13;

tr th, tr td{
width:100px;
height: 100px;
border:1px solid red;

}

＆＃13;

<table class="table table-bordered table-striped">
<!-- Table heading -->
<thead>
    <tr>
        <th class="center">1</th>
        <th class="center">2</th>
    </tr>
</thead>
<!-- // Table heading END -->

<!-- Table body -->
<tbody>

    <tr>
        <td rowspan="2">3</td>
        <td>5</td>
    </tr>
    <tr>
    	<td>xyz</td>
    </tr>
    <tr>
        <td rowspan="2">4</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>

</tbody>
<!-- // Table body END -->
</table>

＆＃13;

＆＃13;

＆＃13;