Infolink

 

Search This Blog

Mar 7, 2014

Table with fixed header on scroll

Column 1 Column 2 Column 3
Row A-1 Row A-2 Row A-3
Row B-1 Row B-2 Row B-3
Row C-1 Row C-2 Row C-3
Row D-1 Row D-2 Row D-3
Row E-1 Row E-2 Row E-3
Row F-1 Row F-2 Row F-3
Row G-1 Row G-2 Row G-3

The code is produced with the following:

<html>
<body>
    <div style="margin: 0; padding: 0; border-collapse: collapse; width: 519px; height:

100px; overflow: hidden; border: 1px solid black;">
        <table style="margin: 0; padding: 0; border-collapse: collapse; color: White; width:

517px; height: 20px; text-align: left; background-color: Grey;">
            <colgroup>
                <col width="200px" />
                <col width="150px" />
                <col width="150px" />
                <col width="16px" />
            </colgroup>
            <tbody>
                <tr style="margin: 0; padding: 0; border-collapse: collapse;">
                    <th style="margin: 0; padding: 0; border-collapse: collapse;">Column 1
                    </th>
                    <th style="margin: 0; padding: 0; border-collapse: collapse;">Column 2
                    </th>
                    <th style="margin: 0; padding: 0; border-collapse: collapse;">Column 3
                    </th>
                    <th style="margin: 0; padding: 0; border-collapse: collapse;"></th>
                </tr>
            </tbody>
        </table>
        <div style="margin: 0; padding: 0; border-collapse: collapse; width: 517px; height:

77px; overflow: auto;">
            <table style="margin: 0; padding: 0; border-collapse: collapse; width: 500px;">
                <colgroup>
                    <col width="200px" />
                    <col width="150px" />
                    <col width="150px" />
                </colgroup>
                <tbody style="margin: 0; padding: 0; border-collapse: collapse;">
                    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
                        <td style="border: 1px solid lightgrey;">Row A-1
                        </td>
                        <td style="border: 1px solid lightgrey;">Row A-2
                        </td>
                        <td style="border: 1px solid lightgrey;">Row A-3
                        </td>
                    </tr>
                    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
                        <td style="border: 1px solid lightgrey;">Row B-1
                        </td>
                        <td style="border: 1px solid lightgrey;">Row B-2
                        </td>
                        <td style="border: 1px solid lightgrey;">Row B-3
                        </td>
                    </tr>
                    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
                        <td style="border: 1px solid lightgrey;">Row C-1
                        </td>
                        <td style="border: 1px solid lightgrey;">Row C-2
                        </td>
                        <td style="border: 1px solid lightgrey;">Row C-3
                        </td>
                    </tr>
                    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
                        <td style="border: 1px solid lightgrey;">Row D-1
                        </td>
                        <td style="border: 1px solid lightgrey;">Row D-2
                        </td>
                        <td style="border: 1px solid lightgrey;">Row D-3
                        </td>
                    </tr>
                    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
                        <td style="border: 1px solid lightgrey;">Row E-1
                        </td>
                        <td style="border: 1px solid lightgrey;">Row E-2
                        </td>
                        <td style="border: 1px solid lightgrey;">Row E-3
                        </td>
                    </tr>
                    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
                        <td style="border: 1px solid lightgrey;">Row F-1
                        </td>
                        <td style="border: 1px solid lightgrey;">Row F-2
                        </td>
                        <td style="border: 1px solid lightgrey;">Row F-3
                        </td>
                    </tr>
                    <tr style="margin: 0; padding: 0; border-collapse: collapse;">
                        <td style="border: 1px solid lightgrey;">Row G-1
                        </td>
                        <td style="border: 1px solid lightgrey;">Row G-2
                        </td>
                        <td style="border: 1px solid lightgrey;">Row G-3
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...