Static Rows and Columns of an HTML Table using CSS and JavaScript

Question

I'd like to have (at a minimum) the first column of my HTML table as a static column. The rest of the columns should scroll horizontally. If the table scrolls vertically, both the static column and other columns should scroll together.

In older versions of IE, you could use CSS Expressions to accomplish this. An example can be found at http://www.javascripttoolbox.com/lib/scrollingdatagrid/.

Any idea how to convert this to a HTML, CSS, and JavaScript solution (cross browser)?

This is what I came up with so far:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <div style="position: relative; display: block; width: 200px;">
        <div style="overflow-x: auto; border: 1px solid black; width: 200px; margin-left: 120px;">
            <table>
                <tbody>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                    <tr>
                        <td style="left: 20px; position: absolute; top: auto;">Column 1</td>
                        <td>Column 2</td>
                        <td>Column 3</td>
                        <td>Column 4</td>
                        <td>Column 5</td>
                    </tr>
                </tbody>
            </table>
        </div></div>
            </div>
    </body>
</html>

Varun · Accepted Answer · 2011-10-12 03:39:17Z

1

you should try using jquery plugin for the same link to plugin

answered Oct 12, 2011 at 3:39

Varun

5,06112 gold badges56 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jason N. Gaylord Over a year ago

I'd prefer not to have something that's so bloated. I'd rather start with something that's more basic.

Varun Over a year ago

@JasonN.Gaylord - in that case you should remove javacript tag from the question, i guess you intend to do it using normal css and html only which is also quite simple as demonstrated by Tran Dinh Thoai

Jason N. Gaylord Over a year ago

Not necessarily. I don't mind having JavaScript but that plug-in would do everything I need and then some. I'm looking for something a little more light weight.

Tran Dinh Thoai · Accepted Answer · 2011-10-12 03:49:55Z

1

Following code works with scrolling horizontally:

<html>
<head>
<style>
.grid { width: 300px; height: auto; overflow: auto; }
.grid td.static { width: 100px; position: fixed; background-color: white; }
.grid td.dynamic { width: 100px; }
.grid td { border: solid 1px black; }
.grid table { width: 500px; }
</style>
</head>
<body>
  <div class='grid'>
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td class='static'>Header 1</td>
        <td class='dynamic c1'>Cell 1A</td>
        <td class='dynamic c2'>Cell 1B</td>
        <td class='dynamic c3'>Cell 1C</td>
        <td class='dynamic c4'>Cell 1D</td>
      </tr>
      <tr>
        <td class='static'>Header 2</td>
        <td class='dynamic c1'>Cell 2A</td>
        <td class='dynamic c2'>Cell 2B</td>
        <td class='dynamic c3'>Cell 2C</td>
        <td class='dynamic c4'>Cell 2D</td>
      </tr>
      <tr>
        <td class='static'>Header 3</td>
        <td class='dynamic c1'>Cell 3A</td>
        <td class='dynamic c2'>Cell 3B</td>
        <td class='dynamic c3'>Cell 3C</td>
        <td class='dynamic c4'>Cell 3D</td>
      </tr>
      <tr>
        <td class='static'>Header 4</td>
        <td class='dynamic c1'>Cell 4A</td>
        <td class='dynamic c2'>Cell 4B</td>
        <td class='dynamic c3'>Cell 4C</td>
        <td class='dynamic c4'>Cell 4D</td>
      </tr>
    </table>
  </div>
</body>
</html>

answered Oct 12, 2011 at 3:49

Tran Dinh Thoai

7021 gold badge7 silver badges21 bronze badges

1 Comment

Jason N. Gaylord Over a year ago

It works similar to the example I showed above. The only things I noticed with this are the following: (1) Cell column A seems to be partially hidden (2) It seems to work in IE if you specify that it's an HTML 5 document by using the appropriate doc type (3) Vertical scrolling doesn't work well as the static column seems to be absolute positioned.

Anonymous · Accepted Answer · 2011-10-12 03:33:34Z

0

Maybe not the best solution, but what came to my mind when I saw your example:

Make 2 tables, the first column in this case would be a table and the second and third are a seperate table included in an iframe right next to the first (static) table. That way you would come out without any JS. Downside for sure is that you the first column is independent to the rest, but you'd definitely have the desired scrolling effect.

answered Oct 12, 2011 at 3:33

Anonymous

3,6996 gold badges32 silver badges40 bronze badges

1 Comment

Jason N. Gaylord Over a year ago

But if the table has to scroll vertically, how would that solve my issue?

Jason N. Gaylord · Accepted Answer · 2011-10-12 22:49:29Z

I think I found a solution that seems to work in both IE and Chrome:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js"></script>
        <script type="text/javascript">
            function scrollTable() {
                var column1 = $("#dailyWorkColumn1");
                var column2 = $("#dailyWorkColumn2");
                column1.scrollTop(column2.scrollTop());
                }

            $(document).ready(function() {
                var column2 = $("#dailyWorkColumn2");
                var column2right = $('#dailyWorkColumn2 tbody td:nth-child(2)')[0].offsetLeft;
                column2.scrollLeft(column2right);
                });
        </script>
        <style type="text/css">
            .dailyWorkColumn1 { overflow: hidden; width: 100px; height: 280px; border: 1px solid blue; position: absolute; left: 10px; top: auto; }
            .dailyWorkColumn2 { overflow: auto; border: 1px solid red; margin-left: 102px; height: 300px; width: 400px; }
        </style>
    </head>
    <body>
       <div style="overflow-y: visible; overflow-x: hidden; border: 1px solid black;">
            <div class="dailyWorkColumn1" id="dailyWorkColumn1">
                <table style="width: 100px;">
                    <tr>
                        <td style="border: 1px solid purple;">Jason</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Jeff</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Dave</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Mike</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Michael</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Lori</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Ashley</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Sean</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Louis</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Chris</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Aaron</td>
                    </tr>
                    <tr>
                        <td style="border: 1px solid purple;">Marie</td>
                    </tr>
                </table>
            </div>
            <div class="dailyWorkColumn2" id="dailyWorkColumn2" onscroll="scrollTable();">
                <table>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            123456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            223456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            323456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            423456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            523456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            623456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            723456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            823456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            923456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            103456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            113456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                    <tr>
                        <td style="min-width: 300px; border: 1px solid orange;">
                            123456
                        </td>
                        <td style="min-width: 300px; border: 1px solid brown;">
                            987654
                        </td>
                    </tr>
                </table>
            </div>
       </div> 
    </body>
</html>

what if i put a longer text in the first table cell.? The whole alignment will be gone .. :P

Collectives™ on Stack Overflow

Static Rows and Columns of an HTML Table using CSS and JavaScript

4 Answers 4

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related