Fixed Row Headers with CSS in an HTML Table

Question

I have Google'd this problem, and I seem to see every variant except for what I need. I need an HTML table with fixed ROW headers. Is there a way to do this with only HTML and CSS? If not, what is the best JQuery plugin for this?

I feel like I'm asking something that someone else has HAD to have done. But everything I look at seems to be something else entirely.

Thank you!

score 0 · Answer 1 · answered Apr 12 '12 at 15:18

0

Have you tried:

table { table-layout:fixed; width:100px; }

answered Apr 12 '12 at 15:18

mb.

21
1

My hope was to create a table whose width would grow based on the number of columns I added to it. However, in the event that the width of the table grew too large, I wanted to be able to scroll left-and-right, but I want the row headers to stay in place. – JavaScript Developer Apr 12 '12 at 15:35
1

I see, probably better to look for a javascript solution than a CSS one. Sorry, haven't see any that does that. – mb. Apr 12 '12 at 16:55

SurinderBhomra · Accepted Answer · 2012-04-12T12:18:17.013

-1

Adding the following CSS style should help:

table tr
{
    height:100px;
}

edited Apr 12 '12 at 12:18

answered Apr 12 '12 at 12:03

SurinderBhomra

2,169
2
24
49

He wants fixed rows, not columns. – PRNDL Development Studios Apr 12 '12 at 12:11
@PRNDL Development Studios: Thanks for that. I have edited my original post. – SurinderBhomra Apr 12 '12 at 12:18
Actually, I'm looking for fixed row HEADERS. I'm do not understand how this addresses that problem. Thank you for trying though. – JavaScript Developer Apr 12 '12 at 13:36
Oh right. I believe I misunderstood. I thought you wanted the table headers to have a fixed height. If you are asking for the table headers to always stay fixed at the top, then this might help:http://stackoverflow.com/a/7732309/1300806. – SurinderBhomra Apr 12 '12 at 13:41

Fixed Row Headers with CSS in an HTML Table

2 Answers2