how to cause a header to stretch horizontally?

Hello I have a table with two rows.
The top row should stretch horizontally all the way to the edge of the screen, no matter how wide the screen is (including a horizontal scrollbar).
For some reason, it is cut off.

here is a sample code that shows what I am talking about:


<html>
<body>
 <table border="1" cellspacing="0" cellpadding="0" width="100%">
 <tr>
 <td width="100%">title</td>
 </tr>
 <tr>
 <td style="position:relative;width:100%; height:100%; z-index:0;">
  <!-- here I place some div at specific screen coorinates (some of them may span to the right of the screen -->
  <div style="position:absolute; left:500px; top:40px;width:700px;height:20px"></div>
 </td>
 </tr>
 </table>
</body>
</html>

Note that I placing an obsolutely positioned div at such a coordinate and with such size, so that it forces the screen to have a horizontal scrollbar (very good). However, the top row of the table only streches until the edge of the screen, and doesn't continue all the way (if you scroll horizontally).

can anyone know how I can fix this?
I must use absolute positioning for the divs.

thanks in advance

how to cause a header to stretch horizontally?

davidklonski

pixelkat

natto

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week