Link to home
Start Free TrialLog in
Avatar of robrodp
robrodpFlag for Mexico

asked on

Need top n rows in an html table fixed

Need top n rows in an html table fixed so they are always visible when I scroll down a table
Avatar of robrodp

ASKER

Either they are too complicated or dont work across browsers.

Somebody must have a simple and elegant solution. Just plain HTML5, no plugings etc
ASKER CERTIFIED SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Create two tables one with fixed rows and other with scrollable height.
<html>
<head>
    <title></title>
</head>
<body>
    <table style="width: 300px" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Column 1
            </td>
            <td>
                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>
        </table>
    </div>
</body>
</html>

Open in new window