Firefox issue when I used position fixed on table row

Question

I need scrollable header for tables. So I decided to use postion: fixed on styles. The problem is the width is shrinked on Firefox & Chrome. It works fine on Mozilla. For your reference I posted my HTML table code.

<html>
<head>
</head>
<body>
   <table width="150%">
      <thead>
         <tr>
            <th width="50%" align="left">Head 1</th>
            <th width="50%" align="left">Head 2</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
         <tr>
            <td>Value 1</td>
            <td>Value 2</td>
         </tr>
      </tbody>
      <tfoot>
         <tr><td>Foot 1</td></tr>
      </tfoot>
   </table>

</body>
</html>

Atrh · Answer 1 · 2012-02-14T08:42:41.727

0

How about this?

 <th align="left" style="position:fixed;float:left;">Head 1</th>
 <th align="left" style="position:fixed;float:right;left:75%;">Head 2</th>

edited Feb 14 '12 at 08:42

answered Feb 14 '12 at 07:54

Atrh

195
1
3
16

I have tried this. It am not looking for this, the scroll bar comes for the table. I don't want the scroll for table, the scroll bar will come for the entire page and the table header needs to be scrollable for vertical as well as horizontal. – Riyaz Ahamed R Feb 14 '12 at 08:03
Note: My table width is 150% not 100% – Riyaz Ahamed R Feb 14 '12 at 08:04
It's working find for horizontal scrolling. Not working for vertical scrolling. – Riyaz Ahamed R Feb 14 '12 at 09:44
In that case,there also have some answers about that.take a look at [html-table-scrolling-vertical-horizontal](http://stackoverflow.com/questions/2191451/html-table-scrolling-vertical-horizontal) – Atrh Feb 15 '12 at 02:13

Firefox issue when I used position fixed on table row

1 Answers1