HTML/CSS - 右側凍結表列

我已經找到了固定/冷凍左邊列在這裏的解決方案：http://jsfiddle.net/emn13/YMvk9/HTML/CSS - 右側凍結表列

body { font:16px Calibri;} 
    table { border-collapse:separate; border-top: 3px solid grey; } 
    td { 
     margin:0; 
     border:3px solid grey; 
     border-top-width:0px; 
     white-space:nowrap; 
    } 
    div { 
     width: 600px; 
     overflow-x:scroll; 
     margin-left:5em; 
     overflow-y:visible; 
     padding-bottom:1px; 
    } 
    .headcol { 
     position:absolute; 
     width:5em; 
     left:0; 
     top:auto; 
     border-right: 0px none black; 
     border-top-width:3px; /*only relevant for first row*/ 
     margin-top:-3px; /*compensate for top border*/ 
    } 
    .headcol:before {content: 'Row ';} 
    .long { background:yellow; letter-spacing:1em; }

但是，它也可能得到一個右固定/沒有Javascript或其他重疊表的凍結列？

來源

2012-11-14 Matty

更改CSS像下面

div { 
      width: auto; 
      overflow-x:scroll; 
      margin-right:5em; 
      overflow-y:visible; 
      padding-bottom:1px; 
     } 
     .headcol { 
      position:absolute; 
      width:5em; 
      right:0; 
      top:auto; 
      border-right: 0px none black; 
      border-top-width:3px; /*only relevant for first row*/ 
      margin-top:-3px; /*compensate for top border*/ 
     } 
     .headcol:after{content: 'Row ';}

DEMO

來源

2012-11-14 12:25:24 Sowmya

謝謝，很多這是工作。但我仍然有垂直滾動的問題：http://jsfiddle.net/2LPsS/ – Matty

我怎麼能用同樣的方式來凍結多列？ – vikasde

這是你在找什麼？我只做了一次rwo。您可以根據需要添加任意數量的行。檢查以下HTML和樣式。

<div><table> 
     <tr><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
    <td class="headcol">1</td></tr> 
</table></div> 

 

     body { font:16px Calibri;} 
     table { border-collapse:separate; border-top: 3px solid grey; } 
     td { 
      margin:0; 
      border:3px solid grey; 
      border-top-width:0px; 
      white-space:nowrap; 
     } 
     div { 
      width: 600px; 
      overflow-x:scroll; 
      overflow-y:visible; 
      padding-bottom:1px; 
     } 
     .headcol { 
      position:absolute; 
      width:5em; 
      right:0; 
      top:auto; 
      border-right: 0px none black; 
      border-top-width:3px; /*only relevant for first row*/ 
      margin-top:-3px; /*compensate for top border*/ 
     } 
     .headcol:before {content: 'Row ';} 
     .long { background:yellow; letter-spacing:1em; }

來源

2012-11-14 12:40:11 Narendra

HTML/CSS - 右側凍結表列

回答

相關問題