0

I am trying to create a form that contains a large amount of data in a table. I am currently trying to fix the header bar, but I can't figure out how to do it. The problem is that I need a fixed row on both the left and top of the table. Some code is included below, but the main idea is that I have a div that is scrollable vertically, which contains a table of two cells (one holds the list for the y axis, the other holds the data associated). The right cell of this table is scrollable horizontally, and the title bar scrolls with it (but not the title bar of the cell on the left). Essentially, I want a title bar that stays at the top of my area when I scroll vertically, but (excepting the left-most cell) scrolls with the table when I scroll horizontally. Any input would be appreciated.

<div id='am_verticalScrollerDiv' style='height: 440px; overflow-y: auto;'>
    <table id='am_verticalScrollerLayoutTable' height='100%'  width='100%' border='0' cellpadding='0' cellspacing='0'>
        <tr>
            <td id='am_resourceListCell' valign='top'>
                <div id='am_resourceListDiv'>
                    <table id='am_resourceTitleTable' width='100%' border='0' cellpadding='0' cellspacing='0'>
                        <tr id='am_resource_tableTitleBar'></tr>
                    </table>
                </div>
                <table id='am_resourceList' width='100%' border='0' cellpadding='0' cellspacing='0'>
                    <tbody></tbody>
                </table>
            </td>
            <td id='am_horizScrollCell' align='right'>
                <div id='am_horizScrollDiv' style='width:900px; overflow-x: auto;'>
                    <div id='am_schedDataTitleBarDiv' style='min-width: 900px;'>
                        <table id='am_schedDataTitleBarTable' width='100%' border='0' cellpadding='0' cellspacing='0'>
                            <tr class='am_schedule_formatBar'></tr>
                            <tr id='am_schedule_tableTitleBar' style='font-family: \"Courier New\", Courier, monospace; font-size: 12px;'></tr>
                        </table>
                    </div>
                    <table id='am_scheduleDisplay' width='100%' border='0' cellpadding='0' cellspacing='0' style='table-layout: fixed; empty-cells: show;'>
                        <thead>
                            <tr class='am_schedule_formatBar'></tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

(All data is inserted via JQuery)

Crash
  • 219
  • 6
  • 16
  • BTW, sorry about all the inline style- there are ridiculous restrictions on me right now from the corporate overlords, and I can't put separate files on the server. – Crash Aug 05 '13 at 16:16
  • Can't you use embedded styles? That would be cleaner, at least. – isherwood Aug 05 '13 at 16:50
  • http://stackoverflow.com/questions/673153/html-table-with-fixed-headers – isherwood Aug 05 '13 at 16:51
  • @isherwood Thanks for the tip, but I just tried a fiddle (http://jsfiddle.net/dy2Mn/) and this doesn't seem to work with the horizontal scrolling- the header doesn't seem to work properly with it. – Crash Aug 05 '13 at 19:58
  • You're facing an uphill battle. Even if you do get it working in modern browsers, you'll probably face issues in IE < 10. Have you considered, for example, DataTables? – isherwood Aug 05 '13 at 20:43
  • I've been trying to avoid plugins if possible- I can't use a paid plugin, and the code will be used for an internal site at a big company, so I don't want to worry about licensing issues. – Crash Aug 05 '13 at 20:49
  • As for browser versions, I shouldn't have to worry about anything older than ie8, as the computers are all maintained by corporate IT – Crash Aug 05 '13 at 20:50
  • I understand, but "DataTables is open source software, free available for you to use and modify". https://datatables.net/download Good luck. – isherwood Aug 05 '13 at 20:52

0 Answers0