bsgrid表格拆分合并（colspan、rowspan）

Colspan: 用来指定单元格横向跨越的列数：colspan是一个合成词:column(列)+span(跨度), 属性值是数字，表示跨几个列合并单元格。colspan就是合并列,colspan中必须指定要合并的列数目，是两列还是三列等等,colspan=2的话就是合并两列,以此类推。colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：

 

Rowspan: 用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，rowspan中必须指定要合并的列数目,是两行还是三行等等,比如rowspan=2就是合并两行。

 

下面是合并单元格的例子：

    <table id="TabBianGeng01" style="width:100%" >

            <thead>

                <tr>

                    <th rowspan="2">费用项</th>

                    <th rowspan="2">合同金额</th>

                    <th rowspan="2">预算总成本</th>

                    <th rowspan="2">单方造价</th>

                    <th colspan="4">完工量</th>

                </tr>

                  <tr>

                     <th hidden  w_index="costResolveName">费用项</th>

                    <th hidden  w_index="signaMoney">合同金额</th>

                    <th hidden  w_index="targetPrimeCost">预算总成本</th>

                    <th hidden  w_index="danFangZaoJia">单方造价</th>                              

                    <th w_index="complete">年初完工量</th>

                    <th w_index="morthFenComplete">本月完工量</th>

                    <th w_index="yeatComplete">本年完工量</th>

                    <th w_index="leijiTiaoZhen">累计完工量</th>

                  </tr>

          </thead>

</table>

合并的结果：

（如图1）

（如图1）中上列中的完工量colspan被设为4，令所在单元格横跨了4列。

 

自定义纵向合并单元格例子：

<table id="tabBianGeng2" style="text-align:center;  height: 50px;"   class=" table table-hover table-bordered table-responsive table-striped">

<tr><th  class="info" style="height: 50px;">纵向单元格</th>

<th class="info" style="height: 50px;">合同规划</th>

<th class="info" style="height: 50px;">预估变更金额</th>

<th class="info" style="height: 50px;">已变更金额</th></tr>

<tr><td  rowspan="2" style="padding-top: 29px;">纵向1</td>

  <td >规划1 </td><td>5756.00</td><td>5756.00</td></tr>

<tr><td >规划2 </td><td>452.01</td><td>452.01</td></tr>

<tr><td  rowspan="3" style="padding-top: 45px;">纵向1</td>

<td>规划3 </td><td>8545</td><td>8545</td></tr>

<tr><td >规划4 </td><td>5421</td><td>5421</td></tr>

<tr><td >规划5 </td><td>6754</td><td>6754</td></tr>

</table>

 

纵向合并的结果：

(如图二)

上例中的纵向单元格1，其rowspan被设为“2”，这表示该单元格必须跨越二行（本身一行，加上另外一行）。因此，纵向1合并了两行，而纵向2 rowspan被设为“3”，合并了三行。如图二所示。