# Freeze the grid view header

**URL:** <https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632>\
**Category:** Rails\
**Created:** [February 18, 2009, 10:23am UTC](https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632 "2009-02-18T10:23:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wfspoet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/e480ec/32.png) [@wfspoet](https://www.ruby-forum.com/u/wfspoet)\
**Post date:** [February 18, 2009, 10:23am UTC](https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632/1 "2009-02-18T10:23:14Z")

</div>

i wanna freeze the grid view header fixed just like in excel as we  
scroll the rows scrolls away leaving the column heading fixed  
I wanna perform this action using css

---

<div class="post-metadata">

**Author:** ![wfspoet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/e480ec/32.png) [@wfspoet](https://www.ruby-forum.com/u/wfspoet)\
**Post date:** [February 18, 2009, 12:28pm UTC](https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632/2 "2009-02-18T12:28:25Z")

</div>

and you intent to make this work on all possible browsers?

On Wed, Feb 18, 2009 at 6:23 AM, William Ss

---

<div class="post-metadata">

**Author:** ![wfspoet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/e480ec/32.png) [@wfspoet](https://www.ruby-forum.com/u/wfspoet)\
**Post date:** [February 18, 2009, 1:57pm UTC](https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632/3 "2009-02-18T13:57:47Z")

</div>

Mathieu R. wrote:

> and you intent to make this work on all possible browsers?

> On Wed, Feb 18, 2009 at 6:23 AM, William Ss

yes, it should work in ie and mozilla ff

---

<div class="post-metadata">

**Author:** ![wfspoet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/e480ec/32.png) [@wfspoet](https://www.ruby-forum.com/u/wfspoet)\
**Post date:** [February 19, 2009, 5:36am UTC](https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632/4 "2009-02-19T05:36:11Z")

</div>

Mathieu R. wrote:

> I wish you good luck with that…  
> I made this working on IE6. Using CSS and Javascript. declaring 2  
> header, setting one hidden and the other one absolutely place above.  
> Works fine on IE6, but looks crappy on FF. I guess you could detect  
> the browser and treat it accordingly…
> 
> On Wed, Feb 18, 2009 at 9:57 AM, William Ss

could u send me that code so that i can use in my application…will

---

<div class="post-metadata">

**Author:** ![wfspoet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/e480ec/32.png) [@wfspoet](https://www.ruby-forum.com/u/wfspoet)\
**Post date:** [February 18, 2009, 2:22pm UTC](https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632/5 "2009-02-18T14:22:10Z")

</div>

I wish you good luck with that…  
I made this working on IE6. Using CSS and Javascript. declaring 2  
header, setting one hidden and the other one absolutely place above.  
Works fine on IE6, but looks crappy on FF. I guess you could detect  
the browser and treat it accordingly…

On Wed, Feb 18, 2009 at 9:57 AM, William Ss

---

<div class="post-metadata">

**Author:** ![wfspoet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/e480ec/32.png) [@wfspoet](https://www.ruby-forum.com/u/wfspoet)\
**Post date:** [February 20, 2009, 6:39am UTC](https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632/6 "2009-02-20T06:39:32Z")

</div>

> On Thu, Feb 19, 2009 at 1:36 AM, William Ss

Send me the css code

---

<div class="post-metadata">

**Author:** ![wfspoet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/e480ec/32.png) [@wfspoet](https://www.ruby-forum.com/u/wfspoet)\
**Post date:** [February 19, 2009, 12:33pm UTC](https://www.ruby-forum.com/t/freeze-the-grid-view-header/160632/7 "2009-02-19T12:33:35Z")

</div>

First, i’m no JS/CSS expert, I did this a long time ago. So don’t get  
scared with the poor coding… ☹  
I’m note sure this will help you, but can give you an idea.

JS:

var tables\_header = $$(’.table\_header’);  
if(tables\_header != null && tables\_header.length \> 0){  
for (var index\_tables = 0; index\_tables \< tables\_header.length;  
++index\_tables) {  
var table\_header = tables\_header[index\_tables];  
if(!table\_header.hasClassName(‘largura\_processada’) &&  
table\_header.next().select(’.table\_body’) != null &&  
table\_header.next().select(’.table\_body’)[0] != null){  
var table\_body = table\_header.next().select(’.table\_body’)[0];  
var ths\_body = table\_body.select(‘th’);  
var ths\_table\_header = table\_header.select(‘th’);  
$(table\_header).style.width = $(table\_header).getWidth()-17;  
for( var index\_ths = 0 ; index\_ths \< ths\_table\_header.length ;  
index\_ths++){  
var th\_table\_header = $(ths\_table\_header[index\_ths]);  
if(!th\_table\_header.hasClassName(‘no\_dynamic\_width’)){  
var classVisibleBefore = $(th\_table\_header).className;  
$(th\_table\_header).className = ‘’;  
$(th\_table\_header).style.width =  
$(ths\_body[index\_ths]).getWidth()-21;  
$(th\_table\_header).className = classVisibleBefore;

```
      }
    }
    $(table_header).style.width = 

```

table\_body.select(‘thead’)[0].getWidth();  
table\_header.absolutize();  
table\_header.addClassName(‘largura\_processada’);  
table\_body.tHead.style.visibility=‘hidden’;  
}  
}  
}

first table:

```
                  <th class="sortable dynamic_width

```

word-wrap"\>Característica

  
  

```
                </tr>
              </thead>
          </table>

```

Second table:

| Descrição | Disp | Filtro |
| --- | --- | --- |

```
                    <th width="50%">Caracter&iacute;stica</th>
                    <th width="50%">Descri&ccedil;&atilde;o</th>
                    <th >Disp</th>
                    <th >Filtro</th>
                  </tr>
                </thead>

```

On Thu, Feb 19, 2009 at 1:36 AM, William Ss

|
| |