Question

I have a program that generates a static HTML file. I have a list of links to sections of the file in a table. I want to be able to jump to a link or scroll the file and have the table stay fixed. I have this code that works via CSS:

<table>
<tr><td><table><tr><td> <div style="position:fixed; top:50px; right:10px"> Table of    Contents Table</div> <td></tr>
<tr><td> <div style="position:fixed; top:65px; right:10px">Some Contents</div></tr>
<tr><td> <div style="position:fixed; top:80px; right:10px">Some More Contents</div>   </td></tr>
<tr><td><div style="position:fixed; top:95x; right:10px"> Even More Contents</div>   </td></tr>
</table>

I have this code that doesn’t work. If I wrap the style tags around the entire table it locks the entire page and you can’t scroll. This happens even if I wrap the table in div tags. Doing it this way is preferable since I don’t have to play with the vertical offsets like I do when each row of the table has its own style tag.

<style type="text/css">
table#t-legend
{ position: fixed; top: 50px; left: 10px }
</style>

<div> <table id="t-legend">
<tr><td><table><tr><td> Fixed Contents Table</td></tr>
<tr><td> Some Contents</tr>
<tr><td> Some More Contents</td></tr>
<tr><td> Even More Contents</td></tr>
</table>

Answer 1

Checkout this fiddle http://jsfiddle.net/pPQu2/3/
Here note that i have removed the css for #t-legend and also check the markup. Hope this helps. 🙂