Bootstrap表格（固定表头||多层表头）
1、常用类
基本样式table
隔行变色table-striped（斑马条纹）
边框table-bordered
鼠标悬停状态table-hover
表格更紧凑table-condensed（适用于数据多的表格，通过减小内间距padding）
颜色success/warning/danger/info/active
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped table-bordered table-hover "> <thead> <tr> <th><input type="checkbox" id="checkboxs" value="all"></th> <th>学号</th> <th>姓名</th> <th>班级</th> <th>高数</th> <th>大物</th> <th>计算机导论</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> </tbody> </table> <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th class="text-center"><input type="checkbox" id="checkboxs" value="all"></th> <th class="text-center">学号</th> <th class="text-center">姓名</th> <th class="text-center">班级</th> <th class="text-center">高数</th> <th class="text-center">大物</th> <th class="text-center">计算机导论</th> </tr> </thead> <tbody> <tr class="danger"> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr class="warning"> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr class="success"> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> </tbody> </table> </div> </div> </div> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover"> <thead> <tr> <th class="text-center"><input type="checkbox" id="checkboxs" value="all"></th> <th class="text-center">学号</th> <th class="text-center">姓名</th> <th class="text-center">班级</th> <th class="text-center">高数</th> <th class="text-center">大物</th> <th class="text-center">计算机导论</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> </tbody> </table> </div> </div> </div> <div class="text-center" style="width: 700px;margin: auto;"> <table class="table table-striped table-bordered table-hover "> <thead> <tr> <th class="text-center"><input type="checkbox" id="checkboxs" value="all"></th> <th class="text-center">学号</th> <th class="text-center">姓名</th> <th class="text-center">班级</th> <th class="text-center">高数</th> <th class="text-center">大物</th> <th class="text-center">计算机导论</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> </tbody> </table> </div> </body> </html>
2、表头固定
实现表头始终固定在最顶端，数据出现垂直滚动条
原理：两个 div 控制两个 table， 一个 table 只显示 thead ，另一个 table 只显示 tbody（需要给定高度）
解决 table 间有空隙问题：
.table{
margin-bottom: -1px;//因为bootstrap中默认margin-bottom:20px，不改变的话两个div之间有空隙
table-layout: fixed;//固定布局
}
解决列不对齐问题（根据 tbody 是否出现滚动条来决定 thead 也带有滚动条）：
$('#set_scroll').click(function () {
// alert($('#tbody_div').css('overflow-y'))
$("#tbody_div").scrollTop(10);//控制滚动条下移10px
if ($("#tbody_div").scrollTop() > 0) {
// alert("有滚动条");
$('#thead_div').css('overflow-y', 'scroll')
} else {
// alert("没有滚动条");
$('#thead_div').css('overflow-y', 'hidden')
}
$("#tbody_div").scrollTop(0);//滚动条返回顶部
})
$('#set_scroll').click()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Document</title> <style> .table { margin-bottom: -1px; table-layout: fixed; } </style> <script> $(function () { $('#select').click(function () { $.get('/smart_oi_idle_time', function (data, success) { $('#smart_oi_body').html('') var show = '' for (var index in data) { var one_data = '' one_data += '<tr>' for (var data_index in data[index]) { one_data += '<td>' + data[index][data_index] + '</td>' } one_data += '</tr>' show += one_data } $('#smart_oi_body').html(show) $('#set_scroll').click() }) }) $('#refresh').click(function () { $('#select').click() }) $('#refresh').click() $('#set_scroll').click(function () { // alert($('#tbody_div').css('overflow-y')) $("#tbody_div").scrollTop(10);//控制滚动条下移10px if ($("#tbody_div").scrollTop() > 0) { // alert("有滚动条"); $('#thead_div').css('overflow-y', 'scroll') } else { // alert("没有滚动条"); $('#thead_div').css('overflow-y', 'hidden') } $("#tbody_div").scrollTop(0);//滚动条返回顶部 }) $('#set_scroll').click() }) </script> </head> <body> <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-12 column"> <h3 class="text-center text-info"> TItle-TItle </h3> </div> </div> <div class="row clearfix"> <div class="col-md-6 column"> <ul class="breadcrumb"> <li> <a href="#">Home</a> </li> <li> <a href="#">Library</a> </li> <li class="active"> Data </li> </ul> </div> <div class="col-md-6 column"> <div class="text-left"> <div class="btn-group"> <button id="select" type="button" class="btn btn-default">select</button> <button id="refresh" type="button" class="btn btn-default">refresh</button> <button id="set_scroll" type="button" class="btn btn-default" style="display: none;">set_scroll</button> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-md-12 column"> <div class="panel panel-default"> <div id="thead_div"> <table class="table table-bordered"> <thead> <th>Field1</th> <th>Field2</th> <th>Field3</th> <th>Field4</th> <th>Field5</th> <th>Field6</th> <th>Field7</th> <th>Field8</th> </thead> </table> </div> <div id="tbody_div" style="height:700px;overflow-y:auto"> <table class="table table-bordered"> <tbody id='smart_oi_body'> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> <tr> <td>Field1</td> <td>Field2</td> <td>Field3</td> <td>Field4</td> <td>Field5</td> <td>Field6</td> <td>Field7</td> <td>Field8</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </body> </html>
参考:https://www.cnblogs.com/yetbobo/p/5046106.html
3、表头列合并（基于bootstrap-table.js）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> </head> </head> <body> <table data-toggle="table" class="table-striped table-bordered table-hover "> <thead> <tr> <th data-colspan="2">合并两列</th> <th data-colspan="1">姓名</th> <th data-colspan="1">班级</th> <th data-colspan="3">合并三列</th> </tr> <tr> <th><input type="checkbox" id="checkboxs" value="all"></th> <th>学号</th> <th>姓名</th> <th>班级</th> <th>高数</th> <th>大物</th> <th>计算机导论</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> </tbody> </table> </body> </html>
参考https://blog.csdn.net/qing_gee/article/details/77878147?utm_source=blogxgwz6
4、表头列行合并（基于bootstrap-table-min.js）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <style> th,td { text-align: center; vertical-align: middle !important; } </style> </head> </head> <body> <table data-toggle="table" class="table-striped table-bordered table-hover "> <thead> <tr> <th data-colspan="2">合并两列</th> <th data-colspan="1" style="border-bottom-style: hidden;">姓名</th> <th data-colspan="1">班级</th> <th style="text-align: center; float: none;display: inline-block;vertical-align: middle;" data-rowspan="2" data-colspan="3">合并三列2行</th> </tr> <tr> <th><input type="checkbox" id="checkboxs" value="all"></th> <th>学号</th> <th>高数</th> <th>计算机导论</th> </tr> <tr> <th><input type="checkbox" id="checkboxs" value="all"></th> <th>学号</th> <th style="border-top-style: hidden;">姓名</th> <th>班级</th> <th>高数</th> <th>大物</th> <th>计算机导论</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> </tr> </tbody> </table> </body> </html>
5、多层表头（不基于bootstrap-table-min.js）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> th, td { text-align: center; vertical-align: middle !important; } </style> <script> </script> </head> </head> <body> <table class="table table-striped table-bordered table-hover "> <thead> <tr> <th rowspan="3"><input type="checkbox" id="checkboxs" value="all"></th> <th rowspan="3">学号</th> <th rowspan="3">姓名</th> <th rowspan="3">班级</th> <th colspan="2" rowspan="2">高数和大物</th> <th colspan="4" >计算机导论和操作系统</th> </tr> <tr> <th colspan="2">计算机导论</th> <th colspan="2">操作系统</th> </tr> <tr> <th>高数</th> <th>大物</th> <th>计算机导论1</th> <th>计算机导论2</th> <th>操作系统1</th> <th>操作系统2</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> </tbody> </table> </body> </html>
6、多层表头并固定（不基于 bootstrap-table-min.js）
写这个的目的是因为我用 bootstrap-table-min.js 合并表头并固定后（添加data-height='200'即可），列总是对不齐，因此写出这个例子。
想用 bootstrap-table-min-js 固定头的可参考 https://segmentfault.com/a/1190000018411239
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> th, td { text-align: center; vertical-align: middle !important; } .table { margin-bottom: -1px; table-layout: fixed; } </style> <script> $(function () { $.set_scroll = function () { $("#tbody_div").scrollTop(10);//控制滚动条下移10px if ($("#tbody_div").scrollTop() > 0) { // alert("有滚动条"); $('#thead_div').css('overflow-y', 'scroll') } else { // alert("没有滚动条"); $('#thead_div').css('overflow-y', 'hidden') } $("#tbody_div").scrollTop(0);//滚动条返回顶部 } $.set_scroll() }) </script> </head> </head> <body> <div id="thead_div"> <table class="table table-striped table-bordered table-hover "> <thead> <tr> <th rowspan="3"><input type="checkbox" id="checkboxs" value="all"></th> <th rowspan="3">学号</th> <th rowspan="3">姓名</th> <th rowspan="3">班级</th> <th colspan="2" rowspan="2">高数和大物</th> <th colspan="4">计算机导论和操作系统</th> </tr> <tr> <th colspan="2">计算机导论</th> <th colspan="2">操作系统</th> </tr> <tr> <th>高数</th> <th>大物</th> <th>计算机导论1</th> <th>计算机导论2</th> <th>操作系统1</th> <th>操作系统2</th> </tr> </thead> </table> </div> <div id="tbody_div" style="height:200px;overflow-y:auto"> <table class="table table-striped table-bordered table-hover "> <tbody> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> <tr> <td><input type="checkbox" name="" id="" value=""></td> <td>1001</td> <td>李白</td> <td>2015级4班</td> <td>80</td> <td>86</td> <td>90</td> <td>84</td> <td>65</td> <td>120</td> </tr> </tbody> </table> </div> </body> </html>
