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>