Bootstrap实现的表格合并单元格示例


Posted in Javascript onFebruary 06, 2018

本文实例讲述了Bootstrap实现的表格合并单元格。分享给大家供大家参考,具体如下:

1、问题背景

利用Bootstrap设计表格,并且表格需要合并单元格

2、实现源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Bootstrap-表格合并单元格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="external nofollow" />
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 98%;
        font-family: "微软雅黑";
        font-size: 14px;
      }
      table{
        width: 100%;
      }
    </style>
    <script>
    </script>
  </head>
  <body>
    <div class="row">
      <div class="col-xs-12">
        <table class="table table-striped">
          <tr>
            <td>
              <label for="stuNo">学号:</label>
              <input type="text" id="stuNo" />
              <div class="btn-group" style="width: 157px; height: 26px;">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width: 157px; height: 26px;">
                  班级
                </button>
                <ul class="dropdown-menu" role="menu">
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >一班</a></li>
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >二班</a></li>
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >三班</a></li>
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >四班</a></li>
                 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >五班</a></li>
                </ul>
              </div>
              <button type="button" class="btn btn-primary">查询</button>
              <button type="button" class="btn">重置</button>
            </td>
          </tr>
        </table>
      </div>
      <div class="col-xs-12">
        <div class="col-xs-2">
          <table class="table table-striped table-bordered">
            <caption>学生表</caption>
            <thead>
              <tr>
                <th>学生</th>
                <th>学号</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>胡思</td>
                <td>2016010101</td>
              </tr>
              <tr>
                <td>赵四</td>
                <td>2016010102</td>
              </tr>
              <tr>
                <td>陈诚</td>
                <td>2016010103</td>
              </tr>
              <tr>
                <td>李磊</td>
                <td>2016010104</td>
              </tr>
              <tr>
                <td>孙杨</td>
                <td>2016010105</td>
              </tr>
              <tr>
                <td>李爽</td>
                <td>2016010106</td>
              </tr>
            </tbody>
          </table>
          <table class="table table-striped table-bordered">
            <caption>学生表</caption>
            <thead>
              <tr>
                <th>学生</th>
                <th>学号</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>胡思</td>
                <td>2016010101</td>
              </tr>
              <tr>
                <td>赵四</td>
                <td>2016010102</td>
              </tr>
              <tr>
                <td>陈诚</td>
                <td>2016010103</td>
              </tr>
              <tr>
                <td>李磊</td>
                <td>2016010104</td>
              </tr>
              <tr>
                <td>游豪</td>
                <td>2016010105</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-xs-10">
          <table class="table table-striped">
            <tr style="text-align: center;">
              <td>到校</td>
              <td>回家</td>
              <td>距离</td>
            </tr>
            <tr style="text-align: center;">
              <td colspan="2" style="text-align: center;">222</td>
              <td rowspan="2" style="width: 200px;">
                <div class="col-xs-12">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>学号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>胡思</td>
                        <td>2016010101</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;">333</td>
            </tr>
          </table>
          <table class="table table-striped">
            <tr style="text-align: center;">
              <td>到校</td>
              <td>回家</td>
              <td>距离</td>
            </tr>
            <tr style="text-align: center;">
              <td colspan="2" style="text-align: center;">222</td>
              <td rowspan="2" style="width: 200px;">
                <div class="col-xs-12">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>学号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>胡思</td>
                        <td>2016010101</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;">333</td>
            </tr>
          </table>
          <table class="table table-striped">
            <tr style="text-align: center;">
              <td>到校</td>
              <td>回家</td>
              <td>距离</td>
            </tr>
            <tr style="text-align: center;">
              <td colspan="2" style="text-align: center;">222</td>
              <td rowspan="2" style="width: 200px;">
                <div class="col-xs-12">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>学号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>胡思</td>
                        <td>2016010101</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;">333</td>
            </tr>
          </table>
          <table class="table table-striped">
            <tr style="text-align: center;">
              <td>到校</td>
              <td>回家</td>
              <td>距离</td>
            </tr>
            <tr style="text-align: center;">
              <td colspan="2" style="text-align: center;">222</td>
              <td rowspan="2" style="width: 200px;">
                <div class="col-xs-12">
                  <table class="table table-striped table-bordered">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>学号</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>胡思</td>
                        <td>2016010101</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: center;">333</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>

3、实现结果

Bootstrap实现的表格合并单元格示例

Javascript 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 #Javascript
AngularJS实时获取并显示密码的方法
Feb 06 #Javascript
详解使用React进行组件库开发
Feb 06 #Javascript
fullpage.js最后一屏滚动方式
Feb 06 #Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 #Javascript
微信小程序使用Promise简化回调
Feb 06 #Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 #Javascript
You might like
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python对html过滤处理的方法
2018/10/21 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
单位在职证明范本
2014/01/09 职场文书
文案策划求职信
2014/03/18 职场文书
法律专业求职信
2014/05/24 职场文书
中文专业自荐书
2014/06/29 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
借款协议书
2014/09/16 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
MySQL创建定时任务
2022/01/22 MySQL