HTML/CSS - Frozen Tabela Kolumna po prawej stronie

Question

Znalazłem rozwiązanie dla stałej/mrożonego lewej kolumnie tutaj: http://jsfiddle.net/emn13/YMvk9/

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; }​ 

Ale jest to również możliwe, aby uzyskać prawo stałe/zamrożona kolumna bez JavaScriptu lub innego nakładanego stołu?

Answer 1

Zmiana css jak poniżej

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

Answer 2

Czy tego szukasz? Zrobiłem to tylko raz. Możesz dodać tyle wierszy, ile chcesz. Sprawdź poniższy kod HTML i styl.

<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; }​