I created a fixed left column in an HTML Table (this code is a simplified version of another post on SO). On the iOS Simulator, I noticed that while the right half of the table scrolls correctly, it doesn't show a scrollbar and lacks inertia scrolling.
Check out an example of the Table: http://jsfiddle.net/jakechasan/94aP4/
Below is the basic code:
HTML:
<div id="tableContainer">
<table>
<tbody>
<tr>
<td class="leftColumn">Row 1</td>
<td>efhiubcebucefbuiceguceuceiuceuceu0v8cev8ceserybewqbyuqw0uqr0</td>
</tr>
</tbody>
</table>
</div>
CSS:
#tableContainer {
width: 200px;
overflow-x:scroll;
margin-left:5em;
overflow-y:visible;
padding-bottom:1px;
background-color: yellow;
}
table {
border-collapse:separate;
border-top: 3px solid grey;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
.leftColumn {
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*/
}
Is there a way to enable inertia scrolling and display the scroll bar?