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 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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中10个不常见却非常有用的函数
2010/03/21 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
CI框架常用方法小结
2016/05/17 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
《藏戏》教学反思
2014/02/11 职场文书
总经理任命书范本
2014/06/05 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
八年级历史教学反思
2016/02/19 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Python 文字识别
2022/05/11 Python