Table with fixed row and column header

Question

There is a question similar to this Here. But it is a different on. Here I need a column and a row as header. I have a table in my project which i want to be scrollabe horizondally and vertically like This

But I need the header to be fixed when we scroll vertically. I'm not sure how to do it. Any help would be appreciated.

http://jsfiddle.net/4z54E/4/

Here is my sample html

<div style="overflow: scroll; width: 300px;height:300px;">
        <table class="myTable tablesorter" style="width:100%;" id="table">

            <thead style=" font-size: 13px;height: 70px;">
                <tr>
                    <th style="width:25px;cursor:pointer;" class="header">Title1</th>
                    <th style="width:25px;cursor:pointer;" class="header">Title2</th>
                    <th style="width:25px;cursor:pointer;" class="header">Title3</th>
                    <th style="width:60px;cursor:pointer;" class="header">Title4</th>
                    <th style="width:150px;cursor:pointer;" class="header">Title5</th>
                    <th style="width:60px;cursor:pointer;" class="header">Title6</th>
                    <th style="width:150px;cursor:pointer;" class="header">Title7</th>
                    <th style="width:60px;cursor:pointer;" class="header">Title8</th>
                    <th style="width:150px;cursor:pointer;" class="header">Title9</th>
                    <th style="width:60px;cursor:pointer;" class="header">Title10</th>
                    <th style="width:150px;cursor:pointer;" class="header">Title11</th>
                </tr>
            </thead>
            <tbody style="font-size: 0.7em;">

                <tr bgcolor="#FFFFFF">
                    <td>Test data</td>
                    <td>Test data</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data</td>
                    <td style="white-space:nowrap;">Test data</td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td>Test data</td>
                    <td>Test data</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data</td>
                    <td style="white-space:nowrap;">Test data</td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td>Test data</td>
                    <td>Test data</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data This has long text</td>
                    <td style="white-space:nowrap;">Test data</td>
                    <td style="white-space:nowrap;">Test data</td>
                </tr>

            </tbody>
        </table>
    </div>

If it's post IE7 I think, you should just be able to use `position:fixed;` Otherwise if you project needs to also be compatible for older versions of IE, you'll probably need to explore a JS solution. — SubjectCurio, Nov 19 '13 at 09:44
@Pete Its based on DIV but its needed in a table. Can it be done in tables? — Marikkani Chelladurai, Nov 19 '13 at 10:14

score 2 · Answer 1 · answered Nov 19 '13 at 11:54

2

OK , I was trying that what I was able to do ^^"

position:fixed;

http://jsfiddle.net/TheBakaTensai/CfEyn/

answered Nov 19 '13 at 11:54

вaкa тєиѕai

21
1

1

@вaka Thanks for your effort but you can see the header is shrinking in width when you re-size the result window. – Marikkani Chelladurai Nov 19 '13 at 13:03

Table with fixed row and column header

1 Answers1