HTML/CSS Gefrorene Tabellenspalte auf der rechten Seite

Question

Ich habe eine Lösung für feste/gefroren linken Spalte finden Sie hier: 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; }​ 

Aber ist es auch möglich, ein rechts fixiert zu erhalten/eingefrorene Spalte ohne Javascript oder eine andere überlagerte Tabelle?

Answer 1

Ändern der CSS wie unten

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

Ist das, was Sie suchen? Ich habe es nur für einen Zwei gemacht. Sie können so viele Zeilen hinzufügen, wie Sie möchten. Überprüfen Sie den folgenden HTML- und Stil.

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