How to place scroll bar on side of table? - html

Question

I have a jsfiddle here: http://jsfiddle.net/m4HB3/
I have a scrolling table with fixed headers which is working correctly. The problem I am having is where the scroll bar is placed, it is placed sligthly underneath the last column which causes it to take up some of the last column space and thus moves the other columns off alignment.
My question is how can I clip the scroll bar to the right of the table so it does not affect taking up column space?
Below is html of sample table:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
</tbody>
</table>
</div>
Below is css:
#tableqanda_onthefly_container
{
width:100%;
overflow-y: scroll;
overflow-x: hidden;
max-height:500px;
}
#tableqanda_onthefly
{
width:100%;
overflow:scroll;
clear:both;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
#tableqanda{
width:100%;
margin-left:0;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}

Answer 1

Try this Fiddle: http://jsfiddle.net/m4HB3/29/
I simply wrapped your table into a container div with an ID of container, removed your overflow properties from the table and set the following on the containing div (you can change the height to whatever you want, I just left it as 75 to demonstrate):
#container
{
height: 75px;
overflow-x: auto;
}
EDIT: After a few tweaks, this is what he wanted http://jsfiddle.net/m4HB3/37/

Answer 2

Not exactly addressing your specific goal but as a work around, you can add an additional TD to the end of the header and set it to the width of the scrollbar.
http://jsfiddle.net/m4HB3/28/
<thead>
<tr>
<th width="5%" class="questionno">Question No.</th>
<th width="27%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="11%" class="image">Image</th>
**<th width="8px" class=""></th>**
</tr>
</thead>
This would at least make it appear more presentable.

Answer 3

Here I have a complete explanation of CSS tables + scroll + Browsers
I hope you find it useful