1. 首页
  2. 问答
  3. 如何制作表头和第一列固定在滚动垂直和水平？

如何制作表头和第一列固定在滚动垂直和水平？

2015-10-20 71 views

回答

2

Original Post

function reposHead(e) { 
 
      var h = document.getElementById('headscroll'); 
 
      h.scrollLeft = e.scrollLeft; 
 
      var f = document.getElementById('divfrozen'); 
 
      f.scrollTop = e.scrollTop; 
 
     } 
 
     function reposHorizontal(e) { 
 
      var h = document.getElementById('headscroll'); 
 
      var c = document.getElementById('contentscroll'); 
 
      h.scrollLeft = e.scrollLeft; 
 
      c.scrollLeft = e.scrollLeft; 
 

 
      var sh = document.getElementById('hscrollpos'); 
 
      sh.innerHTML = e.scrollLeft; 
 

 
      var ch = document.getElementById('contentwidth'); 
 
      var ic = document.getElementById('innercontent'); 
 
      ch.innerHTML = ic.clientWidth; //c.scrollWidth; 
 

 
      var ch2 = document.getElementById('contentheight'); 
 
      ch2.innerHTML = ic.clientHeight; //c.scrollWidth; 
 

 
      var sp = document.getElementById('scrollwidth'); 
 
      sp.innerHTML = e.scrollWidth; 
 
     } 
 
     function reposVertical(e) { 
 
      var h = document.getElementById('divfrozen'); 
 
      var c = document.getElementById('contentscroll'); 
 
      h.scrollTop = e.scrollTop; 
 
      c.scrollTop = e.scrollTop; 
 

 
      var sh = document.getElementById('vscrollpos'); 
 
      sh.innerHTML = e.scrollTop; 
 

 
      var ch = document.getElementById('contentheight'); 
 
      ch.innerHTML = c.scrollHeight; 
 

 
      var sp = document.getElementById('scrollheight'); 
 
      sp.innerHTML = e.scrollHeight; 
 

 
     }
table.main 
 
     { 
 
      width: 700px; 
 
      height: 221px; 
 
      table-layout: fixed; 
 
     } 
 
     table.root 
 
     { 
 
      table-layout: fixed; 
 
     } 
 
     table.content 
 
     { 
 
      table-layout: fixed; 
 
      width: 1890px; 
 
     } 
 
     table.head 
 
     { 
 
      table-layout: fixed; 
 
      width: 1890px; 
 
     } 
 
     table.frozen 
 
     { 
 
      table-layout: fixed; 
 
     } 
 
     td 
 
     { 
 
      line-height: 28px; 
 
     } 
 
     div.horizontal-scroll 
 
     { 
 
      width: 703px; 
 
      height: 22px; 
 
      overflow: hidden; 
 
      overflow-x: scroll; 
 
      border: solid 1px #666; 
 
     } 
 
     div.horizontal-scroll div 
 
     { 
 
      width: 2173px; 
 
      height: 1px; 
 
     } 
 
     div.vertical-scroll 
 
     { 
 
      height: 227px; 
 
      width: 22px; 
 
      overflow: hidden; 
 
      overflow-y: scroll; 
 
      border: solid 1px #666; 
 
     } 
 
     div.vertical-scroll div 
 
     { 
 
      height: 377px; 
 
      width: 1px; 
 
     } 
 
     td.inner 
 
     { 
 
      border-left: 1px solid #666; 
 
      border-bottom: 1px solid #666; 
 
      padding: 3px; 
 
      height: 28px; 
 
     } 
 
     td.frozencol 
 
     { 
 
      border-right: 1px double #666; 
 
      width: 200px; 
 
     } 
 
     td.col1 
 
     { 
 
      border-left: none; 
 
      width: 100px; 
 
     } 
 
     td.bottomcol 
 
     { 
 
      /*border-bottom: 1px solid #666;*/ 
 
     } 
 
     .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 
 
     { 
 
      width: 200px; 
 
      overflow: hidden; 
 
      text-overflow: ellipses; 
 
      white-space: nowrap; 
 
     } 
 
     td.head 
 
     { 
 
      /*border-bottom: 1px solid #666;*/ 
 
      background-color: #efefef; 
 
      border-top: 1px solid #666; 
 
     } 
 
     .rightcol 
 
     { 
 
      border-right: 1px solid #666; 
 
     } 
 
     .toprow 
 
     { 
 
      border-top: 0px; 
 
     } 
 
     div.root 
 
     { 
 
      margin-left: 0px; 
 
      overflow: hidden; 
 
      width: 200px; 
 
      height: 28px; 
 
      border-bottom: 1px solid #666; 
 
     } 
 
     div.frozen 
 
     { 
 
      overflow: hidden; 
 
      width: 200px; /*border-bottom: 1px solid #666;*/ 
 
      height: 200px; 
 
     } 
 
     div.divhead 
 
     { 
 
      overflow: hidden; 
 
      height: 28px; 
 
      width: 500px; 
 
      border-left: 1px solid #666; 
 
      border-right: 1px solid #666; /*border-bottom: 0px solid #666;*/ 
 
      border-bottom: 1px solid #666; 
 
     } 
 
     div.content 
 
     { 
 
      overflow: hidden; 
 
      width: 500px; 
 
      height: 200px; 
 
      border-left: 1px solid #666; 
 
      border-right: 1px solid #666; /*border-bottom: 1px solid #666;*/ 
 
     } 
 
     td.tablefrozencolumn 
 
     { 
 
      width: 200px; 
 
      border-right: 3px solid #666; 
 
     } 
 
     td.tablecontent 
 
     { 
 
      width: 501px; 
 
     } 
 
     td.tableverticalscroll 
 
     { 
 
      width: 24px; 
 
     } 
 
     div.ff-fill 
 
     { 
 
      height: 23px; 
 
      width: 23px; 
 
      background-color: #ccc; 
 
      border-right: 1px solid #666; 
 
      border-bottom: 1px solid #666; 
 
     }
<form id="form1" runat="server"> 
 
    <div> 
 
     <table border="0" cellpadding="0" cellspacing="0" class='main'> 
 
      <tr> 
 
       <td class='tablefrozencolumn'> 
 
        <div id='divroot' class='root'> 
 
         <table border="0" cellpadding="0" cellspacing="0" width="100%" class='root'> 
 
          <tr> 
 
           <td class='inner frozencol colwidth head'> 
 
            Head0 
 
           </td> 
 
          </tr> 
 
         </table> 
 
        </div> 
 
        <div id='divfrozen' class='frozen'> 
 
         <table border="0" cellpadding="0" cellspacing="0" width="100%" class='frozen'> 
 
          <tr> 
 
           <td class='inner frozencol toprow'> 
 
            Col0Row2 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol'> 
 
            Col0Row3 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol'> 
 
            Col0Row4 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol'> 
 
            Col0Row5 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol'> 
 
            Col0Row6 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol'> 
 
            Col0Row7 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol'> 
 
            Col0Row8 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol'> 
 
            Col0Row9 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol'> 
 
            Col0Row10 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner frozencol bottomcol rightcol'> 
 
            Col1Row11 
 
           </td> 
 
          </tr> 
 
         </table> 
 
        </div> 
 
       </td> 
 
       <td class='tablecontent'> 
 
        <div id='headscroll' class='divhead'> 
 
         <table border="0" cellpadding="0" cellspacing="0" class='head'> 
 
          <tr> 
 
           <td class='inner col1 head'> 
 
            Head 1 
 
           </td> 
 
           <td class='inner col2 head'> 
 
            Head 2 
 
           </td> 
 
           <td class='inner col3 head'> 
 
            Head 3 
 
           </td> 
 
           <td class='inner col4 head'> 
 
            Head 4 
 
           </td> 
 
           <td class='inner col5 head'> 
 
            Head 5 
 
           </td> 
 
           <td class='inner col6 head'> 
 
            Head 6 
 
           </td> 
 
           <td class='inner col7 head'> 
 
            Head 7 
 
           </td> 
 
           <td class='inner col8 head'> 
 
            Head 8 
 
           </td> 
 
           <td class='inner col9 head'> 
 
            Head 9 
 
           </td> 
 
           <td class='inner col10 head rightcol'> 
 
            Head 10 
 
           </td> 
 
          </tr> 
 
         </table> 
 
        </div> 
 
        <div id='contentscroll' class='content' onscroll='reposHead(this);'> 
 
         <table border="0" cellpadding="0" cellspacing="0" class='content' id='innercontent'> 
 
          <tr> 
 
           <td class='inner col1 toprow'> 
 
            Col1Row2 
 
           </td> 
 
           <td class='inner col2'> 
 
            Col2Row2 
 
           </td> 
 
           <td class='inner col3'> 
 
            Col3Row2 
 
           </td> 
 
           <td class='inner col4'> 
 
            Col4Row2 
 
           </td> 
 
           <td class='inner col5'> 
 
            Col5Row2 
 
           </td> 
 
           <td class='inner col6'> 
 
            Col6Row2 
 
           </td> 
 
           <td class='inner col7'> 
 
            Col7Row2 
 
           </td> 
 
           <td class='inner col8'> 
 
            Col8Row2 
 
           </td> 
 
           <td class='inner col9'> 
 
            Col9Row2 
 
           </td> 
 
           <td class='inner col10 rightcol'> 
 
            Col10Row2 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1'> 
 
            Col1Row3 
 
           </td> 
 
           <td class='inner'> 
 
            Col2Row3 
 
           </td> 
 
           <td class='inner'> 
 
            Col3Row3 
 
           </td> 
 
           <td class='inner'> 
 
            Col4Row3 
 
           </td> 
 
           <td class='inner'> 
 
            Col5Row3 
 
           </td> 
 
           <td class='inner'> 
 
            Col6Row3 
 
           </td> 
 
           <td class='inner'> 
 
            Col7Row3 
 
           </td> 
 
           <td class='inner'> 
 
            Col8Row3 
 
           </td> 
 
           <td class='inner'> 
 
            Col9Row3 
 
           </td> 
 
           <td class='inner rightcol'> 
 
            Col10Row3 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1'> 
 
            Col1Row4 
 
           </td> 
 
           <td class='inner'> 
 
            Col2Row4 
 
           </td> 
 
           <td class='inner'> 
 
            Col3Row4 
 
           </td> 
 
           <td class='inner'> 
 
            Col4Row4 
 
           </td> 
 
           <td class='inner'> 
 
            Col5Row4 
 
           </td> 
 
           <td class='inner'> 
 
            Col6Row4 
 
           </td> 
 
           <td class='inner'> 
 
            Col7Row4 
 
           </td> 
 
           <td class='inner'> 
 
            Col8Row4 
 
           </td> 
 
           <td class='inner'> 
 
            Col9Row4 
 
           </td> 
 
           <td class='inner rightcol'> 
 
            Col10Row4 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1'> 
 
            Col1Row5 
 
           </td> 
 
           <td class='inner'> 
 
            Col2Row5 
 
           </td> 
 
           <td class='inner'> 
 
            Col3Row5 
 
           </td> 
 
           <td class='inner'> 
 
            Col4Row5 
 
           </td> 
 
           <td class='inner'> 
 
            Col5Row5 
 
           </td> 
 
           <td class='inner'> 
 
            Col6Row5 
 
           </td> 
 
           <td class='inner'> 
 
            Col7Row5 
 
           </td> 
 
           <td class='inner'> 
 
            Col8Row5 
 
           </td> 
 
           <td class='inner'> 
 
            Col9Row5 
 
           </td> 
 
           <td class='inner rightcol'> 
 
            Col10Row5 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1'> 
 
            Col1Row6 
 
           </td> 
 
           <td class='inner'> 
 
            Col2Row6 
 
           </td> 
 
           <td class='inner'> 
 
            Col3Row6 
 
           </td> 
 
           <td class='inner'> 
 
            Col4Row6 
 
           </td> 
 
           <td class='inner'> 
 
            Col5Row6 
 
           </td> 
 
           <td class='inner'> 
 
            Col6Row6 
 
           </td> 
 
           <td class='inner'> 
 
            Col7Row6 
 
           </td> 
 
           <td class='inner'> 
 
            Col8Row6 
 
           </td> 
 
           <td class='inner'> 
 
            Col9Row6 
 
           </td> 
 
           <td class='inner rightcol'> 
 
            Col10Row6 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1'> 
 
            Col1Row7 
 
           </td> 
 
           <td class='inner'> 
 
            Col2Row7 
 
           </td> 
 
           <td class='inner'> 
 
            Col3Row7 
 
           </td> 
 
           <td class='inner'> 
 
            Col4Row7 
 
           </td> 
 
           <td class='inner'> 
 
            Col5Row7 
 
           </td> 
 
           <td class='inner'> 
 
            Col6Row7 
 
           </td> 
 
           <td class='inner'> 
 
            Col7Row7 
 
           </td> 
 
           <td class='inner'> 
 
            Col8Row7 
 
           </td> 
 
           <td class='inner'> 
 
            Col9Row7 
 
           </td> 
 
           <td class='inner rightcol'> 
 
            Col10Row7 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1'> 
 
            Col1Row8 
 
           </td> 
 
           <td class='inner'> 
 
            Col2Row8 
 
           </td> 
 
           <td class='inner'> 
 
            Col3Row8 
 
           </td> 
 
           <td class='inner'> 
 
            Col4Row8 
 
           </td> 
 
           <td class='inner'> 
 
            Col5Row8 
 
           </td> 
 
           <td class='inner'> 
 
            Col6Row8 
 
           </td> 
 
           <td class='inner'> 
 
            Col7Row8 
 
           </td> 
 
           <td class='inner'> 
 
            Col8Row8 
 
           </td> 
 
           <td class='inner'> 
 
            Col9Row8 
 
           </td> 
 
           <td class='inner rightcol'> 
 
            Col10Row8 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1'> 
 
            Col1Row9 
 
           </td> 
 
           <td class='inner'> 
 
            Col2Row9 
 
           </td> 
 
           <td class='inner'> 
 
            Col3Row9 
 
           </td> 
 
           <td class='inner'> 
 
            Col4Row9 
 
           </td> 
 
           <td class='inner'> 
 
            Col5Row9 
 
           </td> 
 
           <td class='inner'> 
 
            Col6Row9 
 
           </td> 
 
           <td class='inner'> 
 
            Col7Row9 
 
           </td> 
 
           <td class='inner'> 
 
            Col8Row9 
 
           </td> 
 
           <td class='inner'> 
 
            Col9Row9 
 
           </td> 
 
           <td class='inner rightcol'> 
 
            Col10Row9 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1'> 
 
            Col1Row10 
 
           </td> 
 
           <td class='inner'> 
 
            Col2Row10 
 
           </td> 
 
           <td class='inner'> 
 
            Col3Row10 
 
           </td> 
 
           <td class='inner'> 
 
            Col4Row10 
 
           </td> 
 
           <td class='inner'> 
 
            Col5Row10 
 
           </td> 
 
           <td class='inner'> 
 
            Col6Row10 
 
           </td> 
 
           <td class='inner'> 
 
            Col7Row10 
 
           </td> 
 
           <td class='inner'> 
 
            Col8Row10 
 
           </td> 
 
           <td class='inner'> 
 
            Col9Row10 
 
           </td> 
 
           <td class='inner rightcol'> 
 
            Col10Row10 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td class='inner col1 bottomcol'> 
 
            Col1Row11 
 
           </td> 
 
           <td class='inner bottomcol'> 
 
            Col2Row11 
 
           </td> 
 
           <td class='inner bottomcol'> 
 
            Col3Row11 
 
           </td> 
 
           <td class='inner bottomcol'> 
 
            Col4Row11 
 
           </td> 
 
           <td class='inner bottomcol'> 
 
            Col5Row11 
 
           </td> 
 
           <td class='inner bottomcol'> 
 
            Col6Row11 
 
           </td> 
 
           <td class='inner bottomcol'> 
 
            Col7Row11 
 
           </td> 
 
           <td class='inner bottomcol'> 
 
            Col8Row11 
 
           </td> 
 
           <td class='inner bottomcol'> 
 
            Col9Row11 
 
           </td> 
 
           <td class='inner bottomcol rightcol'> 
 
            Col10Row11 
 
           </td> 
 
          </tr> 
 
         </table> 
 
        </div> 
 
       </td> 
 
       <td class='tableverticalscroll' rowspan="2"> 
 
        <div class='vertical-scroll' onscroll='reposVertical(this);'> 
 
         <div> 
 
         </div> 
 
        </div> 
 
        <div class='ff-fill'> 
 
        </div> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="3"> 
 
        <div class='horizontal-scroll' onscroll='reposHorizontal(this);'> 
 
         <div> 
 
         </div> 
 
        </div> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    </form>

来源

2015-10-20 19:43:51

+0

谢谢！这很好... –

相关问题

 相关问题