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

लेकिन यह भी पाने के लिए एक सही तय संभव है/जावास्क्रिप्ट या किसी अन्य ओवरलेइंग टेबल के बिना जमे हुए कॉलम?

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

सीएसएस यह आपके लिए क्या देख रहे है? मैंने इसे केवल एक आरओओ के लिए बनाया है। आप जितनी चाहें उतनी पंक्तियां जोड़ सकते हैं। निम्नलिखित एचटीएमएल और शैली की जांच करें।

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