美化表头
Bootstrap Table要固定表头只需要设置高度就可以实现,但是滚动条引起的效果实在不美观,如下图。
添加以下样式,美化这个区域:
.fixed-table-header {
border-right: solid 1px #ddd;
border-top: solid 1px #ddd;
}
.fixed-table-header table {
border-top: solid 0px #ddd !important;
margin-top:-1px;
}
美化后效果,新增的边线就和滚动条对称了,看起来相对美观了不少
完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://www.itxst/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
<link href="https://www.itxst/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://www.itxst/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css" rel="stylesheet" />
<script src="https://www.itxst/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script>
<title>Bootstrap Table入门例子</title>
<style>
.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.fixed-table-header {
border-right: solid 1px #ddd;
border-top: solid 1px #ddd;
}
.fixed-table-header table {
border-top: solid 0px #ddd !important;
margin-top:-1px;
}
/*定义类名为.thead-blue的样式*/
.table .thead-blue th {
color: #fff;
background-color: #3195f1;
border-color: #0d7adf;
}
.bg-blue {
background-color: #0074D9 !important;
}
.bg-green {
background-color: green !important;
}
.bg-red {
background-color: red !important;
}
</style>
</head>
<body >
<div class="table-demo">
<table id="table"></table>
</div>
<script>
//设置需要显示的列
var columns = [{
field: 'Id',
title: '编号'
}, {
field: 'ProductName',
title: '产品名称'
}, {
field: 'StockNum',
title: 'Item 库存'
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
columns: columns,
data: getData(),
classes: "table table-bordered table-striped table-sm table-dark",
height: 400,
rowStyle: function(row, index) {
var classes = [
'bg-blue',
'bg-green',
'bg-red'
]
if (index % 2 === 0 && index / 2 < classes.length) {
return {
classes: classes[index / 2]
}
}
return {
css: {
color: 'blue'
}
}
}
});
function getData()
{
var data = [];
for (var i = 0; i < 50; i++)
{
var item = {
Id: i,
ProductName: '苹果',
StockNum: '200'
};
data.push(item);
};
return data;
}
</script>
</body>
</html>
更多推荐
Bootstrap-table固定表头并美化表头
发布评论