Bootstrap-表格合并单元格

               

1、问题背景

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


2、实现源码

<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="">     <link rel="icon" href="js/bootstrap-3.3.5/docs/favicon.ico">  <title>Bootstrap-表格合并单元格title>  <link rel="stylesheet" href="js/bootstrap-3.3.5/dist/css/bootstrap.css" />  <script type="text/javascript" src="js/jquery-1.12.4.js" >script>  <script type="text/javascript" src="js/bootstrap-3.3.5/dist/js/bootstrap.js" >script>  <style>   body,html{    width: 99%;    height: 98%;    font-family: "微软雅黑";    font-size: 14px;   }   table{    width: 100%;   }  style>  <script>     scripthead<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="#">一班a>li>             <li><a href="#">二班a>li>             <li><a href="#">三班a>li>             <li><a href="#">四班a>li>             <li><a href="#">五班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>2016010101td>       tr>       <tr>        <td>赵四td>        <td>2016010102td>       tr>       <tr>        <td>陈诚td>        <td>2016010103td>       tr>       <tr>        <td>李磊td>        <td>2016010104td>       tr>       <tr>        <td>孙杨td>        <td>2016010105td>       tr>       <tr>        <td>李爽td>        <td>2016010106td>       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>2016010101td>       tr>       <tr>        <td>赵四td>        <td>2016010102td>       tr>       <tr>        <td>陈诚td>        <td>2016010103td>       tr>       <tr>        <td>李磊td>        <td>2016010104td>       tr>       <tr>        <td>游豪td>        <td>2016010105td>       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;">222td>       <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>2016010101td>           tr>          tbody>         table>        div>       td>      tr>      <tr>       <td colspan="2" style="text-align: center;">333td>      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;">222td>       <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>2016010101td>           tr>          tbody>         table>        div>       td>      tr>      <tr>       <td colspan="2" style="text-align: center;">333td>      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;">222td>       <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>2016010101td>           tr>          tbody>         table>        div>       td>      tr>      <tr>       <td colspan="2" style="text-align: center;">333td>      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;">222td>       <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>2016010101td>           tr>          tbody>         table>        div>       td>      tr>      <tr>       <td colspan="2" style="text-align: center;">333td>      tr>     table>    div>   div>  divbody>html>

3、实现结果

Bootstrap-表格合并单元格_第1张图片

           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

你可能感兴趣的:(Bootstrap-表格合并单元格)