asked on

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

LZ1

Something like this?

LZ1

http://www.javascripttoolbox.com/lib/scrollingdatagrid/

remorina

@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

kadaba

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.

ASKER CERTIFIED SOLUTION

remorina

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kadaba

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.

remorina

@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

Gary

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.