Home/ Questions/Q 6676805
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T04:02:17+00:00

I’d like to have (at a minimum) the first column of my HTML table

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0