I've removed the overflow-y:scroll;
for .questionsList
, and wrapped the td contents with a div that has an id of "scroll". Then added this css: #scroll {overflow-y:scroll;height:100%;}
See the example here: http://jsfiddle.net/M98wS/3/
HTML:
<table class="questionsTable">
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="25%" />
<tr>
<td class="questionTitle" height="20px" colspan="4">Space 1 (fixed height, 20px)</td>
</tr>
<tr>
<td class="questionsList" rowspan="2">
<div id="scroll">
Space 2 (scrollable, 25% width, fixed height in page)
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>Space 2
<br/>
</div>
</td>
<td height="auto" colspan="3">Space 3 (fills the remaining space)</td>
</tr>
<tr>
<td class="questionActions" height="20px" colspan="4">Space 4 (fixed height, 20px)</td>
</tr>
</table>
CSS:
html, body {
margin:0;
padding:0;
height:100%;
border:none;
}
table, td {
border: 1px solid black;
}
.questionsTable {
width: 100%;
height: 100%;
}
.questionsList {
overflow-x: auto;
}
.questionTitle .questionActions {
overflow: hidden;
height: 20px;
}
#scroll {overflow-y:scroll;height:100%;}