Solved

Need top n rows in an html table fixed

Posted on 2012-04-09
4
242 Views
Last Modified: 2012-04-10
Need top n rows in an html table fixed so they are always visible when I scroll down a table
0
Comment
Question by:robrodp
4 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37824248
0
 

Author Comment

by:robrodp
ID: 37824541
Either they are too complicated or dont work across browsers.

Somebody must have a simple and elegant solution. Just plain HTML5, no plugings etc
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 37824641
On another question, the only 'complete' working solution was to use two tables and make sure the <td> widths were identical on both tables.  The top or 'header' table was just a single row.  The bottom table was set to scroll.
0
 
LVL 12

Expert Comment

by:Anuradha Goli
ID: 37827427
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

0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question