多表头表格

原创
2013/06/12 16:35
阅读数 139
表格多表头模式,参见:http://www.360ui.net

双表头

table-5

实现如下:

<table class="tableStyle" useCheckBox="true" useMultColor="true">

    <tr>

        <th rowspan="2" class="th_m2" ></th>

        <th colspan="2" class="th_m" >第一</th>

        <th colspan="3" class="th_m" >第二</th>

        <th colspan="2" class="th_m" >第三</th>

    </tr>

    <tr>

       

        <th width="10%" class="th_m"></th>

        <th width="5%" class="th_m"></th>

        <th width="20%" class="th_m">工作</th>

        <th width="15%" class="th_m">系方式</th>

        <th width="20%" class="th_m">住址</th>

        <th width="10%" class="th_m">婚姻状况</th>

        <th width="10%" class="th_m">操作</th>

    </tr>

    <tr>

        <td width="5%"><input type="checkbox" value="1"/></td>

        <td></td>

        <td>25</td>

        <td>设计师</td>

        <td>15012546548</td>

        <td>天津市和平</td>

        <td>已婚</td>

        <td><span class="img_view hand" title=""></span><span class="img_edit hand" title="修改"></span><span class="img_delete hand" title=""></span></td>

    </tr>

    <tr>

        <td><input type="checkbox" value="2"/></td>

        <td></td>

        <td>25</td>

        <td>设计师</td>

        <td>15012546548</td>

        <td>天津市和平</td>

        <td>已婚</td>

        <td><span class="img_view hand" title=""></span><span class="img_edit hand" title="修改"></span><span class="img_delete hand" title=""></span></td>

    </tr>

 

</table>

 

三表头

table-6

实现如下:

<table  class="tableStyle" useCheckBox="true" useMultColor="true">

  <tr>

    <th rowspan="3" class="th_m3"></td>

    <th colspan="4" class="th_m">星期一</th>

    <th colspan="4" class="th_m">星期二</th>

    <th colspan="4" class="th_m">星期三</th>

  </tr>

  <tr>

    <th colspan="2" class="th_m">上午</th>

    <th colspan="2" class="th_m">下午</th>

    <th colspan="2" class="th_m">上午</th>

    <th colspan="2" class="th_m">下午</th>

    <th colspan="2" class="th_m">上午</th>

    <th colspan="2" class="th_m">下午</th>

  </tr>

  <tr>

    <th class="th_m">1</th>

    <th class="th_m">2</th>

    <th class="th_m">3</th>

    <th class="th_m">4</th>

    <th class="th_m">1</th>

    <th class="th_m">2</th>

    <th class="th_m">3</th>

    <th class="th_m">4</th>

    <th class="th_m">1</th>

    <th class="th_m">2</th>

    <th class="th_m">3</th>

    <th class="th_m">4</th>

  </tr>

  <tr>

    <td><input type="checkbox" value="1"/></td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td><input type="checkbox" value="2"/></td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table>
展开阅读全文
打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部