一个table数据有很多列，有上下左右滚动条，怎样可以表格数据横向拖动的时候，表格的前四列固定不动？
自己百度 谷歌好多案例， 但是都不太符合现在的项目，现在的项目是一个table，百度案例要么是用插件，要么是两个table，但是这样改动会太大，要么是用新的div复制table的前四列，这样表格的点击事件将会失效，自己写了一个但是在ie8下面兼容性不好，拖动横向滚动条的时候，前四列会等个几秒钟才出来，滚动条拉动很拖拉。希望大家给点建议，谢谢。以下是自己的代码：
$(function() { $(".scrolldiv").scroll(function(){ $(".selectBox").each(function() { $( <script> $(function() { $(".scrolldiv").scroll(function(){ $(".selectBox").each(function() { $(this).css("left",($(".scrolldiv").scrollLeft())+"px").css({"position":"relative"}).css({"border-right":"1px solid #bbb"}).css({"border-left":"1px solid #bbb"}); $(".selectBox:even").addClass("evenclass"); $(".selectBox:odd").addClass("oaddclass"); }); }); $(".scrolldiv").scroll(function(){ $(".xh").each(function() { $(this).css("left",($(".scrolldiv").scrollLeft())+"px").css({"position":"relative"}).css({"border-right":"1px solid #bbb"}).css({"border-left":"1px solid #bbb"}); $(".xh:even").addClass("evenclass"); $(".xh:odd").addClass("oaddclass"); }); }); $(".scrolldiv").scroll(function(){ $(".status").each(function() { $(this).css("left",($(".scrolldiv").scrollLeft())+"px").css({"position":"relative"}).css({"border-right":"1px solid #bbb"}).css({"border-left":"1px solid #bbb"}); $(".status:even").addClass("evenclass"); $(".status:odd").addClass("oaddclass"); }); }); $(".scrolldiv").scroll(function(){ $(".DH").each(function() { $(this).css("left",($(".scrolldiv").scrollLeft())+"px").css({"position":"relative"}).css({"position":"relative"}).css({"border-right":"1px solid #bbb"}).css({"border-left":"1px solid #bbb"}); $(".DH:even").addClass("evenclass"); $(".DH:odd").addClass("oaddclass"); }); }); });
HTML复制出来看看。给前四列添加id，在滚动条事件里改变这些id的样式。
又或者是滚动时把这四列的内容拿出来，做一个浮层盖住下面的table，控制好出现和消失的效果。
给你整了一个例子：
<html>
<head>
<meta charset="utf-8"></meta>
<script src="jquery-1.12.1.js"></script>
<title>test</title>
<style>
table{border-collapse: collapse;}
tr{
border: red 1px solid;
}
td{
border-right: red 1px solid;
}
</style>
</head>
<body>
<div id="firstDiv" style="width: 450px;overflow-x: scroll;">
<table style="width: 600px;" id="tableFirst">
<thead>
<tr>
<td onclick="aletFun()">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</thead>
<tr>
<td onclick="aletFun()">11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</div>
<script>
$("#firstDiv").scroll(function() {
if($("#copyDiv").length <= 0){
$("#firstDiv").append("<div id='copyDiv' style='background-color: wheat;width: 300px;overflow-x: hidden;top: 8px;position: absolute;'>" + $("#tableFirst").prop('outerHTML') + "</div>");
}else{
if($("#firstDiv").scrollLeft() <= 0){
$("#copyDiv").css("display","none");
}else{
$("#copyDiv").css("display","block");
}
}
});
function aletFun() {
alert("aaaa");
}
</script>
</body>
</html>