首先要记住
1. table-layout
http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp
2.border-collapse
http://www.w3school.com.cn/cssref/pr_tab_border-collapse.asp
不用插件的例子
注意这个例子因为下面的内容需要有滚动条，所有头部为了和下面的对齐，需要流出来滚动条的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.fd-contain{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
overflow:hidden;
}
.fd-table-header{
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 31px;
}
table{
border-collapse: collapse;//如果可能，边框会合并为一个单一的边框
border-spacing: 0;
table-layout: fixed;
/*border-collapse: separate; //默认值。边框会被分开*/
}
.fd-table-body{
position:absolute;
top:0;
left:0;
z-index:2;
width: 100%;
height: 100%;
overflow:auto;
}
.fd-table-header table{
width: 100%;
height: 31px;
}
table th{
height: 30px;
color: #444;
font: 12px/30px "SimSun";
text-align: center;
border-right: 1px solid #dbe1e8;
border-bottom: 1px solid #dedede;
background-color: #f5f5f5;
zoom: 1;
}
table th.last{
width:16px;
}
table thead > tr > th.fd-row-first .fd-checkbox-contain .fd-checkbox-icon{
position: absolute;
top: 0;
left: 50%;
z-index: 2;
margin-left: -8px;
width: 16px;
height: 100%;
font: 0/0 SimSun;
text-indent: -9999em;
background: url(../images/checkbox/icon-checkbox.png) 0 center no-repeat;
}
table > thead > tr > th.fd-row-first{
width: 98px;
}
table > thead > tr > th.fd-row-first .fd-checkbox-contain {
position: relative;
z-index: 1;
float: left;
height: 100%;
}
table > thead > tr > th.fd-row-first .fd-checkbox-contain .fd-input-checkbox {
display: inline-block;
margin-left: 16px;
margin-right: 10px;
opacity: 0;
filter: "alpha(opacity=0)";
}
table > thead > tr > th.fd-row-first .fd-xh {
display: inline-block;
width: 52px;
text-align: center;
}
table th:after {
display: block;
content: "";
clear: both;
}
.fd-table-body table{
width: 100%;
height: 100%;
}
.fd-table-body table td{
height: 36px;
color: #444;
font: 13px/36px "SimSun";
text-align: center;
border-right: 1px solid #dbe1e8;
border-bottom: 1px solid #f3f5f9;
background-color: #fff;
zoom: 1;
}
.fd-table-body tbody > tr > td .fd-checkbox-contain .fd-checkbox-icon{
position: absolute;
top: 0;
left: 50%;
z-index: 2;
margin-left: -8px;
width: 16px;
height: 100%;
font: 0/0 SimSun;
text-indent: -9999em;
background: url(../images/checkbox/icon-checkbox.png) 0 center no-repeat;
}
.ffd-table-body > tbody > tr > td .fd-checkbox-contain {
position: relative;
z-index: 1;
float: left;
height: 100%;
}
</style>
</head>
<body>
<div>
<div>
<table>
<thead>
<tr>
<th>
<label>
<input type="checkbox" name=""
v-model="checkedAll"
@change="changeCheckboxAll"
/>
<span>checkbox的图片</span>
</label>
<span>序号</span>
</th>
<th>业务类别</th>
<th>模板名称</th>
<th>模板来源</th>
<th>设置默认</th>
<th>操作</th>
<th class="last"></th>
</tr>
</thead>
</table>
</div>
<div>
<table class="fd-table js-fd-table">
<thead>
<tr>
<th>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
序号
</span>
</th>
<th>
业务类别
</th>
<th>
模板名称
</th>
<th>
模板来源
</th>
<th>
设置默认
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
118
</span>
</td>
<td>
司法赔偿监督审查卷宗
</td>
<td>
司法赔偿监督审查卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
119
</span>
</td>
<td>
司法赔偿监督上级法院赔偿委员会重审
</td>
<td>
司法赔偿监督上级法院赔偿委员会重审
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
120
</span>
</td>
<td>
司法赔偿监督本院赔偿委员会重审卷宗
</td>
<td>
司法赔偿监督本院赔偿委员会重审卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
121
</span>
</td>
<td>
赔偿确认申诉审查卷宗
</td>
<td>
赔偿确认申诉审查卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
122
</span>
</td>
<td>
其他赔偿卷宗
</td>
<td>
其他赔偿卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
123
</span>
</td>
<td>
（行政赔偿）诉前调解卷宗
</td>
<td>
诉前调解赔偿
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
124
</span>
</td>
<td>
请示答复卷宗
</td>
<td>
请示答复卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
125
</span>
</td>
<td>
行政赔偿请示答复卷宗
</td>
<td>
行政赔偿请示答复卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
126
</span>
</td>
<td>
其他行政赔偿卷宗
</td>
<td>
其他行政赔偿卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
127
</span>
</td>
<td>
刑事司法救助卷宗
</td>
<td>
刑事司法救助卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
128
</span>
</td>
<td>
民事司法救助卷宗
</td>
<td>
民事司法救助卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
129
</span>
</td>
<td>
行政司法救助卷宗
</td>
<td>
行政司法救助卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
130
</span>
</td>
<td>
国家赔偿司法救助卷宗
</td>
<td>
国家赔偿司法救助卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
131
</span>
</td>
<td>
执行司法救助卷宗
</td>
<td>
执行司法救助卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
132
</span>
</td>
<td>
涉诉信访司法救助卷宗
</td>
<td>
涉诉信访司法救助卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
133
</span>
</td>
<td>
其他司法救助卷宗
</td>
<td>
其他司法救助卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
134
</span>
</td>
<td>
认可与执行台湾地区法院裁判审查卷宗
</td>
<td>
认可与执行台湾地区法院裁判审查卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
135
</span>
</td>
<td>
认可与执行台湾地区仲裁裁决审查卷宗
</td>
<td>
认可与执行台湾地区仲裁裁决审查卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
154
</span>
</td>
<td>
恢复执行卷宗
</td>
<td>
恢复执行卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
155
</span>
</td>
<td>
财产保全执行卷宗
</td>
<td>
财产保全执行卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="">
<span>
checkbox的图片
</span>
</label>
<span>
156
</span>
</td>
<td>
执行异议卷宗
</td>
<td>
执行异议卷宗
</td>
<td>
系统提供
</td>
<td>
<label>
<input type="radio" name="szmr" value="index+1">
<span>
</span>
</label>
</td>
<td>
<span class="fd-editor-btn js-tips-trigger-defaultC">
编辑
</span>
<span class="fd-delete-btn js-tips-trigger-defaultC">
删除
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
例子2引入插件fixedTableRowCol.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
固定table的头部和左侧的一列的实现方案
</title>
<style type="text/css">
.fd-table-box {
width:200px;
height:200px;
overflow:hidden;
border:1px solid red;
}
table ,td,th {
border-collapse:collapse;
border:1px solid #ccc;
background-color:#fff;
}
td,th {
padding:10px;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="jsTest">
<table>
<tr>
<th>
中国
</th>
<th>
中国
</th>
<th>
中国
</th>
<th>
中国
</th>
<th>
中国
</th>
<th>
中国
</th>
<th>
中国
</th>
</tr>
<tr>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
</tr>
<tr>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
</tr>
<tr>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
</tr>
<tr>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
</tr>
<tr>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
</tr>
<tr>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
<td>
测试
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="jQuery.v1.11.1.min.js">
</script>
<script type="text/javascript" src="fixedTableRowCol.js">
</script>
<script type="text/javascript">
$('#jsTest').fixedTableRowCol({
rows: 1,
//冻结的行数
cols: 1,
//冻结的列数
callback: function(obj) {
console.log(obj)
}
})
</script>
</body>
</html>
插件的fixedTableRowCol.js代码
/**
* Created by huasyu on 2017/12/6.
*/
/**
* @author wuwg
* @version 2017.01.01
* @description file
* @createTime 2017.12.06
* @updateTime 2017.12.06
* @descrition 兼容ie7
* 特别说明，此插件会将所有内容进行重置，所以需要在table中绑定事件请采取用事件委托的方式
*/
+ function (window, $) {
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define('fixedTableRowCol',['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS style for Browserify
module.exports = factory;
} else {
// Browser globals
factory(jQuery);
}
})(function ($) {
$.fn.fixedTableRowCol= function (options) {
var _this = $(this);
// 该方法针对的元素必须是唯一的
if(_this.size()==1){
// 默认参数
var _defaultOptions={
tableId:_this.attr('id'), //冻结的table对象的id
rows: 1, //冻结的行数
cols: 1, //冻结的列数
callback: function (obj) {
console.log(obj)
}
};
// 合并参数
var _opts= $.extend(true,{},_defaultOptions,options||{});
// 局部作用域
var _scope={
// 获取table
getTable: function () {
_scope.table= _this.children('table');
},
// 初始化函数
init: function () {
// 初始化函数
_scope.initParams();
// 制作布局容器
_scope.makeLayoutContain();
// 初始化尺寸
_scope.initSize();
// 填充数据
_scope.fillData();
// 绑定事件
_scope.bindEvent();
},
// 初始化必须参数
initParams: function () {
// 获取table
_scope.getTable();
// 初始化基础参数
_scope.options={
// table 容器的可视宽
tableContainWidth:0,
// table 容器的可视高
tableContainHeight:0,
// table 宽
tableWidth:0,
// table 高
tableHeight:0,
ele:{
// 固定行table容器
rowsTableContain:null,
// 左上角table容器
cornerTableContain:null,
// 固定列table容器
colsTableContain:null,
// 数据table容器
dataTableContain:null
}
};
_scope.initTableContainStyle();
},
// 初始化table 容器样式
initTableContainStyle: function () {
_this.css({
position:'relative',
padding:0,
border:0,
overflow:'hidden'
});
},
// 获取table容器大小
getTableContainSize: function () {
// table 容器的可视宽
_scope.options.tableContainWidth =_this.innerWidth();
// table 高
_scope.options.tableContainHeight =_this.innerHeight();
},
// 获取table大小
getTableSize: function () {
// table 宽
_scope.options.tableWidth=_scope.table.outerWidth(true);
// table 高
_scope.options.tableHeight=_scope.table.outerHeight(true);
},
// 初始化大小
initSize: function () {
// 获取table容器大小
_scope.getTableContainSize();
// 获取table大小
_scope.getTableSize();
// 设置布局容器的大小
_scope.setLayoutContainSize();
},
// 创建布局容器
makeLayoutContain: function () {
var _layoutContain=[];
// 如果冻结行数和列数都大于0，则创建cornerTableContain（左上角容器）
if(_opts.rows>0&& _opts.cols>0){
_layoutContain.push('<div id="'+_opts.tableId+'-corner"></div>');
}
//如果冻结行数大于0，则创建rowsTableContain（固定行容器）
if(_opts.rows>0){
_layoutContain.push('<div id="'+_opts.tableId+'-rows"></div>');
}
//如果冻结列数大于0，则创建colsTableContain （固定列容器）
if(_opts.cols>0){
_layoutContain.push('<div id="'+_opts.tableId+'-cols"></div>')
}
// 数据table容器
_layoutContain.push('<div id="'+_opts.tableId+'-data"></div>');
// 追加到容器中
_this.append($(_layoutContain.join('')));
// 左上角table容器
_scope.options.ele.cornerTableContain=
$('#'+_opts.tableId+'-corner').size()>0?$('#'+_opts.tableId+'-corner'):null;
//固定行容器
_scope.options.ele.rowsTableContain=
$('#'+_opts.tableId+'-rows').size()>0?$('#'+_opts.tableId+'-rows'):null;
//固定列容器
_scope.options.ele.colsTableContain=
$('#'+_opts.tableId+'-cols').size()>0?$('#'+_opts.tableId+'-cols'):null;
//数据table容器
_scope.options.ele.dataTableContain=$('#'+_opts.tableId+'-data');
// 设置布局容器基础style
_scope.setLayoutContainBaseStyle();
//将数据添加到table容器中
_scope.table.appendTo(_scope.options.ele.dataTableContain);
},
// 设置布局容器的样式
// 这里的样式不需要根据容器变化而变化，是固定不变的
setLayoutContainBaseStyle: function () {
// 左上角table容器
if(_scope.options.ele.cornerTableContain){
_scope.options.ele.cornerTableContain.css({
position:'absolute',
top:0,
left:0,
'z-index':4,
overflow:'hidden'
});
}
// 固定行容器
if(_scope.options.ele.rowsTableContain){
_scope.options.ele.rowsTableContain.css({
position:'absolute',
top:0,
left:0,
'z-index':3,
overflow:'hidden'
});
}
// 固定列容器
if(_scope.options.ele.colsTableContain){
_scope.options.ele.colsTableContain.css({
position:'absolute',
top:0,
left:0,
'z-index':2,
overflow:'hidden'
});
}
//数据table容器
_scope.options.ele.dataTableContain.css({
position:'relative',
top:0,
left:0,
'z-index':1,
width:'100%',
height:'100%',
'overflow':'auto'
});
},
// 设置布局容器的大小
setLayoutContainSize: function () {
// 如果table容器的宽小于table的宽，那说明需要出现"横向滚动条"。
// 所以容器高需要减去滚动条的高=滚动条高 ie ,chrome都为17
// 固定列容器
if(_scope.options.ele.colsTableContain){
_scope.options.ele.colsTableContain.css({
height:_scope.options.tableContainHeight-((_scope.options.tableContainWidth<_scope.options.tableWidth)?17:0)
});
}
// 如果table容器的高小于table的高，那说明需要出现纵向滚动条。
// 所以容器宽需要减去滚动条的宽 =滚动条宽ie ,chrome都为17
// 固定行容器
if(_scope.options.ele.rowsTableContain){
_scope.options.ele.rowsTableContain.css({
width:_scope.options.tableContainWidth-((_scope.options.tableContainHeight<_scope.options.tableHeight)?17:0)
});
}
},
//填充数据
fillData: function () {
// table中的数据
var _tableData=_scope.options.ele.dataTableContain.get(0).innerHTML;
// 左上角table容器
if(_scope.options.ele.cornerTableContain){
_scope.options.ele
.cornerTableContain
.get(0).innerHTML=_tableData;
_scope.options.ele
.cornerTableContain.children('table').css({
width:_scope.options.tableWidth,
height:_scope.options.tableHeight
});
}
// 固定行容器
if(_scope.options.ele.rowsTableContain){
_scope.options.ele
.rowsTableContain
.get(0).innerHTML=_tableData;
_scope.options.ele
.rowsTableContain.children('table').css({
width:_scope.options.tableWidth,
height:_scope.options.tableHeight
});
}
// 固定列容器
if(_scope.options.ele.colsTableContain){
_scope.options.ele
.colsTableContain
.get(0).innerHTML=_tableData;
_scope.options.ele
.colsTableContain.children('table').css({
width:_scope.options.tableWidth,
height:_scope.options.tableHeight
});
}
// 固定行
_scope.fixedRows();
// 固定列
_scope.fixedCols();
},
// 固定行
fixedRows: function () {
//如果冻结行数大于0，则设置rowsTableContain的高度为对应表格行数高度的和
if (_opts.rows > 0) {
// 固定行的高度
var _rowsHeight = 0;
// 是否存在合并行
var _ignoreRowNum = 0;
// 循环累加
_scope.table.find("tr:lt(" + _opts.rows + ")").each(function () {
if (_ignoreRowNum > 0){
_ignoreRowNum--;
} else {
var _firstEle= $(this).find('td:first, th:first')
// 高度累加
_rowsHeight +=_firstEle.outerHeight(true);
// 获取 rowspan的值
_ignoreRowNum = _firstEle.attr('rowSpan');
// 判断是否有合并行
_ignoreRowNum=typeof(_ignoreRowNum) == 'undefined'?0:(parseInt(_ignoreRowNum) - 1)
}
});
// 这块得根据border-collapse:collapse 来计算; 如果是 separate 就不需要再加1
_rowsHeight += 1;
// 设置固定行容器的高
_scope.options.ele.rowsTableContain.css("height", _rowsHeight);
// 设置左上角table容器的高,只有存在才会设置
if(_scope.options.ele.cornerTableContain){
_scope.options.ele.cornerTableContain.css("height", _rowsHeight)
}
}
},
// 固定列
fixedCols: function () {
//如果冻结列数大于0，则设置colsTableContain的宽度和对应表格列数宽度的和
if (_opts.cols > 0) {
// 固定列的高度
var _colsWidth = 0;
// 是否存在合并列
var _ignoreColNum = 0;
// 循环累加
_scope.table.find("tr:eq(0)").children().each(function () {
// 如果合并列大于固定的列，那么直接返回
if (_ignoreColNum >= _opts.cols){
return false;
}
// 宽度累加
_colsWidth += $(this).outerWidth(true);
// 合并列表
_ignoreColNum += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;
});
// 这块得根据border-collapse:collapse 来计算; 如果是 separate 就不需要再加1
_colsWidth += 1;
// 设置固定列容器的宽
_scope.options.ele.colsTableContain.css("width", _colsWidth);
// 设置左上角table容器的高,只有存在才会设置
if(_scope.options.ele.cornerTableContain){
_scope.options.ele.cornerTableContain.css("width", _colsWidth)
}
}
},
//销毁函数
destory: function () {
// 解除事件绑定
_scope.unbindEvent();
// 左上角table容器
_scope.options.ele.cornerTableContain=null;
// 固定行容器
_scope.options.ele.rowsTableContain=null;
// 固定列容器
_scope.options.ele.colsTableContain=null;
// table中的数据
var _tableData=_scope.options.ele.dataTableContain.get(0).innerHTML;
_scope.options.ele.dataTableContain=null;
// 清空内容，重新填充内容
_this.get(0).innerHTML='';
_this.get(0).innerHTML=_tableData;
},
//窗口变动
resize: function () {
// 初始化尺寸
_scope.initSize();
// 填充数据
_scope.fillData();
},
// 绑定事件
bindEvent: function () {
//滚动区域的滚动条事件
_scope.options.ele.dataTableContain
.off('scroll')
.on('scroll',
function () {
var _scrollLeft=_scope.options.ele.dataTableContain.scrollLeft();
var _scrollTop=_scope.options.ele.dataTableContain.scrollTop();
if(_scope.options.ele.rowsTableContain){
_scope.options.ele.rowsTableContain.scrollLeft(_scrollLeft);
}
if(_scope.options.ele.colsTableContain){
_scope.options.ele.colsTableContain.scrollTop(_scrollTop);
}
if($.type(_opts.callback)=='function'){
_opts.callback({
scrollLeft:_scrollLeft,
scrollTop:_scrollTop,
scrollHeight:_scope.options.ele.dataTableContain.get(0).scrollHeight,
clientHeight:_scope.options.tableContainHeight,
});
}
});
// 绑定resize事件
$(window).off('resize.'+_opts.tableId).on('resize.'+_opts.tableId, function () {
_scope.resize();
});
},
// 取消事件绑定
unbindEvent: function () {
//滚动区域的滚动条事件
_scope.options.ele.dataTableContain
.off('scroll');
// 取消resize事件
$(window).off('resize.'+_opts.tableId)
},
// 更新的方法
update: function (callback) {
// 先执行回调函数
if($.type(callback)=='function'){
callback(_scope);
}
//debugger
// 调用resize方法
_scope.resize();
}
};
_scope.init();
return _scope;
}else {
throw new Error('fixedTableRowCol插件针对的table,id 必须唯一！')
}
};
});
}(window,jQuery);
有关于display
http://www.w3school.com.cn/cssref/pr_class_display.asp
-
« 上一篇：
jquery的ajax使用formData对象上传文件
-
列表的表头固定，左侧第一列固定
：下一篇 »