具有固定标头的HTML表

时间:2013-08-05 16:13:56

标签: html

我正在尝试创建一个包含表中大量数据的表单。我目前正在尝试修复标题栏,但我无法弄清楚如何做到这一点。问题是我需要在表格的左侧和顶部都有一个固定的行。下面列出了一些代码,但主要思想是我有一个可垂直滚动的div,它包含一个包含两个单元格的表格(一个包含y轴列表,另一个包含相关数据)。该表的右侧单元格可水平滚动,标题栏随之滚动(但不是左侧单元格的标题栏)。基本上,当我垂直滚动时,我想要一个位于我区域顶部的标题栏,但是当我水平滚动时(除了最左边的单元格)滚动表格。任何意见都将不胜感激。

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

(所有数据都是通过JQuery插入的)

0 个答案:

没有答案