The layout I have created can be viewed 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>
This setup resembles a table constructed with div elements. The first column displays a list of questions, and the second column showcases answers or multiple answers that may require horizontal scrolling.
An issue I am encountering is that when I scroll down, the vertical scrollbar for the second column also moves downwards. What I desire is for the horizontal scrollbar to remain fixed in its position regardless of vertical scrolling.
I aim for a functionality similar to Google Spreadsheets, where the first column remains static while horizontal scrolling is enabled for other columns, accompanied by overall vertical scrolling for all content.
Unfortunately, utilizing a `position:fixed` property on the second column is not an option.
P.S: I have specific reasons for opting against using actual table elements for this structure.