how to frezze a row (i.e. Header row) of html table

is there any way through which we can freeze the first (header) row of html table
Venus_JewelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LZ1Commented:
Something like this?
remorinaCommented:
@LZ1: the above example would work only in IE, it wouldn't work in FF, Safari or Chrome

A table row/head positioning can be very tricky and most examples would work on some browsers while not the others.

From my personal point of view I'd prefer to use a simple technique like below which creates a table with the headers then put the data in a scrollable div, that would simply work with any browser and I've used it before.

Venus, you can try the example below and check if would work with your code/requirements

Cheers to all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Table with fixed header</title>
</head>
<body>
    <table style="width: 300px" cellpadding="0" cellspacing="0">
        <tr>
            <td style="font-weight: bold;">Column 1
            </td>
            <td style="font-weight: bold;">Column 2</td>
        </tr>
    </table>
    <div style="overflow: auto; height: 100px; width: 320px;">
        <table style="width: 300px;" cellpadding="0" cellspacing="0">
            <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>
        </table>
    </div>
</body>
</html>

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

kadabaCommented:
would not work well with changing data would it?

if the data "hello world this is a test line in the table" is present instead of "value 1" there would not be a match to the header and its corresponding data.

I haven't tried but seems will behave this way.
remorinaCommented:
@kadaba,
This can easily be fixed as below, I just didn't want to specify widths at this stage

At the end we provide ideas, samples and simple solutions, it should then be modified upon the asker's needs, that's why there was a "check if would work with your code/requirements" in my comment as it's not clear what sort of data is being populated in the table, whther dynamic or static.

regards


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Table with fixed header</title>
</head>
<body>
    <table style="width: 300px" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width:50%;font-weight: bold;">hello world this is a test line in the table
            </td>
            <td style="width:50%;font-weight: bold;">Column 2</td>
        </tr>
    </table>
    <div style="overflow: auto; height: 100px; width: 320px;">
        <table style="width: 300px;" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width:50%">Value 1</td>
                <td style="width:50%">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>
        </table>
    </div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kadabaCommented:
Dont get me wrong and no need to be loud.
It was pretty simple was it not, you could have provided this in the earlier post (my view though).

Thanks.
remorinaCommented:
@Kadaba
So you're here to help the asker and provide solutions or ?
I didn't get you wrong and apology if you see any loudness in my comment, this clearly wasn't the intention, I was only clarifying.
I respect every expert's comment and asker's of course.

I'm not to here to argue, we should instead try to make EE serve its goal

@Venus: sorry for the inconvenience

Cheers for all
GaryCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.