HTML/CSS右側に冷凍表の列は

Question

私はここで、固定/凍結された左の列のためのソリューション見つけた：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; }​ 

をしかし、右が固定取得することも可能です/ Javascriptや別のオーバレイテーブルのないフリーズコラム？

Answer 1

変更

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

以下のようなCSSは、あなたが探しているものを、このですか？私は1つの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; }​