table内容很多的时候需要固定表头以获取更好的浏览体验,这就需要另外制作一个内容一样的表头来掩人耳目,但是由于是两个不同的表格,随着真实表格内容的变化,真实表格表头的宽度也会随之变化,而赝品的表格则不会变化,分分钟就露馅了。
解决思路:
- 保持两个表格的宽度一致
- 保持表头的th或者tr宽度一致
- 保持两个表格的边框、padding样式一致
- 赝品的表格定位在顶部不跟随滚动
- 表格数据变化时宽度会改变,表头宽度在重新计算前可能会错位,可给表格的父盒子加一个透明度过渡
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet">
<style>
.thead-tr-clone {
background: burlywood;
}
</style>
<title>测试..</title>
</head>
<body>
<button class="btn default-btn">测试</button>
<div style="position: relative;">
<table class="table clone-table" style="margin-bottom: 0;position: absolute;">
<thead>
<tr class="thead-tr-clone">
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
</table>
<div class="bs-example" data-example-id="contextual-table" style="max-height: 200px;overflow: auto;">
<table class="table tag-table">
<thead>
<tr class="thead-tr">
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Column content Column content Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<th scope="row">3</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.0/js/bootstrap.js"></script>
<script>
$(".btn").click(function () {
console.log("button3")
$(".clone-table").width($(".tag-table").outerWidth())//防止有滚动条时宽度变化
$(".thead-tr-clone th").each(function (i, v) {
$(this).css("width", $(".thead-tr th").eq(i).outerWidth())
})
$(".thead-tr-clone th").each(function (i, v) {
console.log($(this).width(), $(".thead-tr th").eq(i).width())
})
})
$(".btn").click()
</script>
</body>
</html>
遇到换页时出现大量空白的情况,将tbody里只放置一个tr一个td,里面再用div貌似就解决了,遇到问题时只能逐一尝试。遇到换页时重叠的情况,一是给外面打印的容器宽度进行调整,二是对page的一些属性进行设置,暂时解决了问题。
@page 规则用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性,而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。
@page 规则可以通过CSS对象模型接口 CSSPageRule 访问.
size
指定页面盒模型所在的容器的大小和方向。一般情况下,因为一个页面盒模型被渲染到一面纸张上,所以这个属性也指示了目标纸张的大小
@page {
size: A4;
margin-top: 0;
margin-bottom: 1cm;
margin-left: 0;
margin-right: 0;
}
@page { size: portrait; }/* 纵向*/
@page { size: landscape; }/* 横向*/
html,body{height:99%}
:root,html:last-child,body:last-child{page-break-after:auto}/* 有可能可以减少不必要的空白页*/