两个 table 实现固定列
https://blog.csdn.net/psp0001060/article/details/49705247
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定列头</title>
<script src="/rs/js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-table {
border-collapse: collapse;
width:100%;
white-space: nowrap;
}
.ui-table th {
border: 1px solid #ffffff;
padding: 1px;
text-align: center;
height: 28px;
}
.ui-table td {
border: 1px solid #ffffff;
background-color: #eeeeee;
padding: 3px;
height: 28px;
}
div.x_auto_box {
position: absolute;
z-index: 1;
}
div.lock_box {
float: left;
position: sticky;
left: 0;
z-index: 5;
}
</style>
</head>
<body>
<!-- 左侧DIV -->
<div id="list" >
<div class="lock_box" style='display: inline-block'>
<table class="ui-table">
<thead>
<tr>
<td>No号</td>
<td>员工号</td>
<td>部门</td>
</tr>
</thead>
<tbody>
<?php
for ($i = 0; $i < 30; $i ++) {
echo "<tr>";
echo "<td>$i</td>";
echo "<td>DHL130023</td>";
echo "<td>动画联盟</td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
<!-- 右侧 -->
<div class="x_auto_box" id="showDiv" style='display: inline-block'>
<?php
for ($i = 0; $i < 30; $i ++) {
echo '<input type="hidden" name="dto.position" value="1" />';
}
?>
<table id="tableRight" class="ui-table">
<thead>
<tr>
<td>性别</td>
<td>出生日期</td>
<td>民族</td>
<td>籍贯</td>
<td>婚姻状况</td>
<td>学历</td>
<td>职位</td>
<td>毕业院校</td>
<td>专业</td>
<td>院校类别</td>
<td>毕业日期</td>
<td>年龄</td>
<td>户籍地址</td>
<td>入职时间</td>
<td>转正日期</td>
<td>本单位工龄</td>
<td>合同签订</td>
<td>合同年限</td>
<td>日语等级</td>
<td>社保账号</td>
<td>公积金帐号</td>
<td>身份证号</td>
<td>毕业证书</td>
<td>离职时间</td>
<td>离职原因</td>
<td>户口性质</td>
<td>政治面貌</td>
<td>参加工作</td>
<td>联系电话</td>
<td>邮箱</td>
<td>家庭住址</td>
<td>办公电话</td>
<td>备注</td>
</tr>
</thead>
<tbody>
<?php
$h = <<<here
<tr οnclick="javascript:window.location.href='/HRMS2/pages/personManageInfo.jsp?userid=SX00001'">
<td>男</td>
<td></td>
<td></td>
<td></td>
<td>未婚</td>
<td>小学</td>
<td>普通员工</td>
<td></td>
<td></td>
<td>专升本</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td>0.0</td>
<td></td>
<td>0</td>
<td>四级</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>非农业户口</td>
<td>民主党派</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
here;
for ($i = 0; $i < 30; $i ++) {
echo $h;
}
?>
</tbody>
</table>
</div>
</div>
</body>
</html>
|
