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="/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/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" >
<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>
View Code
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="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/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"
>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" >
<table class="table table-bordered">
<tbody id='smart_oi_body'>
<tr>bootstrap 5
<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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论