Large Data Table with first column fixed
- by bhavya_w
I have structure as shown in the fiddle http://jsfiddle.net/5LN7U/.
<section class="container">
<section class="field">
<ul>
<li> Question 1 </li>
<li> question 2 </li>
<li> question 3 </li>
<li> question 4 </li>
<li> question 5 </li>
<li> question 6 </li>
<li> question 7 </li>
</ul>
</section>
<section class="datawrap">
<section class="datawrapinner">
<ul>
<li><b>Answer 1 :</b></li>
<li><b>Answer 2 :</b></li>
<li><b>Answer 3 :</b></li>
<li><b>Answer 4 :</b></li>
<li><b>Answer 5 :</b></li>
<li><b>Answer 6 :</b></li>
<li><b>Answer 7 :</b></li>
</ul>
</section>
</section>
</section>
Basically its a table structure made using divs. The first column contains a long list of questions and the second column contains answers/multiple answers which can be quite big ( there has to be horizontal scrolling in the second column.)
The problem i am facing is when i scroll downwards the second column which has the horizontal scroll bar is also scrolling downward. I want horizontal scrollbar to be fixed there. as in it should be always fixed there no matter how much i scroll vertically.
Much Like Google Spreadsheets: where the first column stays fixed and there's horizontal scrolling on rest of the columns with over vertical scrolling for whole of the data.
I cannot used position fixed in the second column.
P.S : please no lectures on using div's for making a table structure. I have my own reasons.
and its kinda urgent. Thanks in advance.
