<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>忧伤</title> <style> *{ margin:0; padding:0;} .dd{ width:600px; height:400px;margin:100px auto; overflow:hidden; position:relative;} .t{ width:100%; border:1px solid #ccc; border-collapse:collapse;} .t th{ font-weight:bold; font-size:14px; text-align:center; border:1px solid #ccc; background:#f5f5f5;max-width:100px; min-width:100px; vertical-align:middle; line-height:36px;} .t td{ text-align:center; border:1px solid #ccc; line-height:30px;min-width:100px; max-width:100px;} .fixhead{border-bottom:1px solid #ccc; position:absolute; right:0; height:37px; left:201px; top:0; overflow-x:hidden;} .fixLeft{ position:absolute; left:0; top:37px; bottom:0; width:200px; overflow-y:hidden;} .wrap{ position:absolute; top:37px; left:201px; overflow:scroll; right:0; bottom:0;} .fixDate{ width:101px; height:37px; position:absolute; left:0; top:0;} </style> </head> <body> <div class="dd"> <div class="fixDate"></div> <div class="fixhead"></div> <div class="fixLeft"></div> <div class="wrap"> <table class="t"> <tr> <th>日期 </th> <th>考试时间</th> <th>考场科目</th> <th>第1考场</th> <th>第2考场</th> <th>第3考场</th> <th>第4考场</th> <th>第5考场</th> <th>第6考场</th> <th>第7考场</th> <th>第8考场</th> <th>第9考场</th> <th>第10考场</th> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> <tr> <td>2014-11-01 </td> <td>14:00~14:30</td> <td>教师3</td> <td>第1考场</td> <td>第2考场</td> <td>第3考场</td> <td>第4考场</td> <td>第5考场</td> <td>第6考场</td> <td>第7考场</td> <td>第8考场</td> <td>第9考场</td> <td>第10考场</td> </tr> </table> </div> </div> </body> </html> <script type="text/javascript"> var oDiv=document.getElementsByClassName("wrap")[0]; var fixDate=document.getElementsByClassName("fixDate")[0]; var oFixHead=document.getElementsByClassName("fixhead")[0]; var oFixLeft=document.getElementsByClassName("fixLeft")[0]; //表头复制 var oTable=document.getElementsByTagName("table")[0]; var aTr=oTable.getElementsByTagName("tr"); var TableTop=document.createElement("table"); TableTop.className="t" TableTop.appendChild(aTr[0]); oFixHead.appendChild(TableTop); //表左侧复制 var TableLeft=document.createElement("table"); TableLeft.className="t" var oFrag=document.createDocumentFragment(); for(var i=0;i<aTr.length;i++){ var oTd=aTr[i].children[0]; var oTd1=aTr[i].children[1]; var oTr=document.createElement("tr"); oTr.appendChild(oTd); oTr.appendChild(oTd1); oFrag.appendChild(oTr); } TableLeft.appendChild(oFrag); oFixLeft.appendChild(TableLeft); //左上方向的单元格复制 var oTh=oFixHead.getElementsByTagName("th")[0]; var oTh1=oFixHead.getElementsByTagName("th")[1]; var oTable=document.createElement("table"); oTable.className="t"; var oTr=document.createElement("tr"); oTr.appendChild(oTh); oTr.appendChild(oTh1); oTable.appendChild(oTr); fixDate.appendChild(oTable); oDiv.onscroll=function(){ var tt=this.scrollTop; var ll=this.scrollLeft; oFixLeft.scrollTop=tt; oFixHead.scrollLeft=ll; } </script>
开发不给力，什么都不给力，拿着劳工当劳力用，总之就是各种不给力