Sunday, 2 December 2012

Freeze column in html table

<html>
<head>
    <title></title>
    <style>
        table
        {
            font-family: verdana;
        }
        div#AdjResultsDiv
        {
            width: 200px;
            height: 200px;
            overflow-x: scroll;
            position: relative;
            font-family: verdana;
        }
        div#AdjResultsDiv th
        {
            background-color: navy;
            font-family: verdana;
            color: white;
            position: relative;
            cursor: default;
            top: expression(document.getElementById("AdjResultsDiv").scrollTop-2); /*IE5+ only*/
            z-index: 10;
        }
        td.locked, th.locked
        {
            font-family: verdana;
            color: white;
            background-color: navy;
            position: relative;
            cursor: default;
            left: expression(document.getElementById("AdjResultsDiv").scrollLeft-2); /*IE5+ only*/
        }
        div#AdjResultsDiv th.locked, div#AdjResultsDiv td.normal
        {
            z-index: 99;
        }
    </style>
</head>
<body>
    <div id="AdjResultsDiv">
        <table border="1" style="left: 1px; top: 155px; height: 1px;" cellpadding="0px" cellspacing="0px"
            align="center">
            <tr>
                <td class="locked" style="font-weight: bold; font-size: 12px; background-color: #69a6d0;
                    font-size: 12px; color: #ffffff; height: 19px; color: White;" width="100px" align="center">
                    Colunm1
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm2
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="250px" align="center">
                    Colunm3
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm4
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm5
                </td>
            </tr>
            <tr>
                <td class="locked" style="font-weight: bold; font-size: 12px; background-color: #69a6d0;
                    font-size: 12px; color: #ffffff; height: 19px; color: White;" width="100px" align="center">
                    Colunm1
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm2
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="250px" align="center">
                    Colunm3
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm4
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm5
                </td>
            </tr>
            <tr>
                <td class="locked" style="font-weight: bold; font-size: 12px; background-color: #69a6d0;
                    font-size: 12px; color: #ffffff; height: 19px; color: White;" width="100px" align="center">
                    Colunm1
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm2
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="250px" align="center">
                    Colunm3
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm4
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm5
                </td>
            </tr>
            <tr>
                <td class="locked" style="font-weight: bold; font-size: 12px; background-color: #69a6d0;
                    font-size: 12px; color: #ffffff; height: 19px; color: White;" width="100px" align="center">
                    Colunm1
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm2
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="250px" align="center">
                    Colunm3
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm4
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm5
                </td>
            </tr>
            <tr>
                <td class="locked" style="font-weight: bold; font-size: 12px; background-color: #69a6d0;
                    font-size: 12px; color: #ffffff; height: 19px; color: White;" width="100px" align="center">
                    Colunm1
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm2
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="250px" align="center">
                    Colunm3
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm4
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm5
                </td>
            </tr>
            <tr>
                <td class="locked" style="font-weight: bold; font-size: 12px; background-color: #69a6d0;
                    font-size: 12px; color: #ffffff; height: 19px; color: White;" width="100px" align="center">
                    Colunm1
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm2
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="250px" align="center">
                    Colunm3
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm4
                </td>
                <td style="font-weight: bold; font-size: 12px; color: #ffffff; height: 19px; background-color: #69a6d0;
                    color: White;" width="100px" align="center">
                    Colunm5
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)