在窗口可调表格上寻找固定标题

Question

我尝试到处寻找，但找不到解决我的问题的好方法。我希望创建一个带有固定标题的表格，在滚动表格的其余部分时保留该标题。问题是我还希望它能够在页面窗口调整时对齐。我已经能够获得固定的标题，并且在调整窗口时能够使列对齐，只是无法让两者一起工作。有没有一个脚本可以做到这一点？我尝试过fixedheadertable jquery、flexigrid、fixed-header-coffee、chromatable 和 floatyhead。这些都无法给我我正在寻找的解决方案。也许我做错了什么，但我有一个使用 theader、tbody 等的传统表格。我想避免将表格分成两个表格，因为它们似乎永远不会正确排列，但如果这是唯一的解决方案，我会拿走它。

请帮忙！

Answer 1

您可以仅使用标准 HTML/CSS。具体来说，在 CSS 中利用 display/overflow/height ，在 HTML 中利用 thead/tbody 。 CSS 示例：

.scrollableTable tbody {
    display: block;
    overflow-y: auto;
    width: 100%;
    height: 50px;
}
.scrollableTable tr {
    display: block;
}
.scrollableTable td, .scrollableTable th {
    width: 50%;
}

HTML 示例：

<table class="scrollableTable">
    <thead>
        <tr>
            <th>Fruit</th>
            <th>Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apples</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>Yellow</td>
        </tr>
        <tr>
            <td>Oranges</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>

Answer 2

试试这个答案，
它可以在 IE8、Firefox 和 Chrome 中运行。

样式

    .Container { margin-left: 200px; background-color: green; overflow: scroll; overflow-x: hidden; height: 200px; }

    .BigTable { width: 100%; }

    .BigTable td { width: 40%; }

    .BigTable td + td { width: 30%; }

    .BigTable td + td + td { width: 30%; }

    .Header { margin-left: 200px; height: 30px; background-color: blue; }

    .Header .Heading { width: 40%; float: left; height: 30px; }

    .Header .Heading + .Heading  { width: 30%; }

    .Header .Heading + .Heading + .Heading { width: 30%; }

表

<div class="Header">
    <div class="Heading">Heading 1</div>
    <div class="Heading">Heading 2</div>
    <div class="Heading">Heading 3</div>
</div>
<div class="Container">
    <table class="BigTable">
        <tbody class="scrollContent">
            <tr class="normalRow">
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
            <tr class="alternateRow">
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
            <tr class="normalRow">
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
        <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
        </tbody>
    </table>
</div>  

或尝试这个

#listBevel, #listTable {
    position: absolute;
    z-index: 2;
    border: 1px solid #989898;
    top: 85px;
    left: 227px;
    right: 37px;
    height: 270px;
    min-width: 654px;
}

/* @group List Table Headers */

#listTableHeaders {
    position: absolute;
    z-index: 3;
    top: 67px;
    left: 39px;
    right: 37px;
    height: 500px;
    min-width: 654px;
    border: 1px solid #989898;
    overflow: hidden;
    overflow-y: scroll;
}

.tableHeaderShadow {
    background: url(/images/interface/bevel_shadow.png) repeat-x;
    position: fixed;
    height: 5px;
    top: 105px;
    right: 53px;
    left: 228px;
    min-width: 639px;
}

#scrollBarCoverContainer {
    position: fixed;
    z-index: 5;
    top: 86px;
    left: 228px;
    right: 38px;
    height: 0;
    min-width: 654px;
    font-size: 11px;
    border: 1px none #989898;
    text-align: right;
}

#scrollBarCoverUp {
    background: url(/images/interface/list_header_bg.png) repeat-x;
    width: 14px;
    height: 18px;
    border-left: 1px solid #e5e5e5;
    float: right;
}

table#entryListHeaders th img.sortArrow {
    float: right;
}

table#entryListHeaders th a {
    color: #000;
    text-decoration: none;
    display: block;
    height: 18px;
}

table#entryListHeaders th:hover {
    background-position: 0 -18px;
    cursor: default;
}

table#entryListHeaders th {
    background: url(/images/interface/list_header_bg.png) repeat-x;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #a5a5a5;
    text-align: left;
    padding: 0 5px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 18px;
    width: 42%;
    font-size: 11px;
    line-height: 1.6em;
    text-shadow: #fff 0 1px 0;
}
table#entryListHeaders th + th {
    width: 32%;
}

table#entryListHeaders th.selectedHeader {
    text-shadow: #d8e6ff 0 1px 0;
    background-image: url(/images/interface/list_header_selected.png);
    border-left-color: #c2d4f2;
}

#listTable {
    background-color: #fefefe;
    top: 104px;
    height: 251px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: 11px;
    border-collapse: collapse;
}

table#entryList {
}

table#entryList td {
    width: 42%;
}

span.truncateText {
    display: block;
    height: 18px;
    overflow: hidden;
}




tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    border-right: 1px hidden #cbd1d8;
    padding: 1px 5px;
    height: 18px;
    line-height: 1.6em;
    margin: 0;
    border-left-style: hidden;
    border-left-width: 1px;
}

tbody.scrollContent tr.alternateRow {
    background: #eaf2ff;
}

tbody.scrollContent tr.selectedRow td {
    background: url(/images/interface/selected_row.png) repeat-x;
    color: #fff;
    border-right-style: hidden;
}

table#entryList td + td {
    width: 32%;
}

tbody.scrollContent tr:hover, tbody.scrollContent tr.alternateRow:hover {
    background-color: #d8e7ff;
    cursor: default;
}




<div id="scrollBarCoverContainer">

        <div id="scrollBarCoverUp"></div>

        <div class="tableHeaderShadow"></div>


    </div>

    <div id="listTableHeaders">

        <table id="entryListHeaders" border="0" cellpadding="0" cellspacing="0" width="100%">

        <thead class="fixedHeader">
            <tr>
                <th id="selectedHeader">Name</th>
                <th>Domain</th>

                <th>>Modified</th>
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr class="normalRow">
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>

                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
            <tr class="alternateRow">
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

            <tr class="normalRow">
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>



            <tr class="alternateRow">

                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>

                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>

                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>

            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">

                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>

                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>

                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>

            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">

                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>

                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>

                    <tr class="alternateRow">
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>Sep 16, 2007 01:54 AM</td>
            </tr>
        </tbody>
    </table>

</div>  

Answer 3

这是一个渐进增强的解决方案，应该是跨浏览器兼容的，这要归功于 jQuery。

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        var sizeColWidths = function() {
            // reset column widths (in case previously set)
            $('#fruitTable td, #fruitTable th').css('width', 'auto');
            $('#fruitTable').removeClass('scrollableTable');
            $('#fruitTable tbody').css('width', 'auto');
            // record current column widths
            var i=0, colWidth=new Array();
            $('#fruitTable th').each(function() {
                colWidth[i++] = $(this).outerWidth();
            });
            // freeze the current column widths
            $('#fruitTable tr').each(function() {
                var i=0;
                $('th, td', this).each(function() {
                    $(this).css('width', colWidth[i++] + 'px');
                })
            });
            // make the table body scroll (add tbody width for scroll bar)
            $('#fruitTable').addClass('scrollableTable');
            $('#fruitTable tbody').css('width', ($('#fruitTable thead').width() + 20) +'px');
        };
        $(document).ready(function() {sizeColWidths()});
        $(window).resize(function() {sizeColWidths()});
    </script>
    <style type="text/css">
        .scrollableTable tbody {
            display: block;
            height:50px;
            overflow-y:auto;
        }
        .scrollableTable tr {
            display: block;
        }
    </style>
</head>
<body>
    <table id="fruitTable">
        <thead>
            <tr>
                <th>Fruit</th>
                <th>Color</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Apples</td>
                <td>Red</td>
            </tr>
            <tr>
                <td>Bananas</td>
                <td>Yellow</td>
            </tr>
            <tr>
                <td>Grapes</td>
                <td>Purple</td>
            </tr>     
            <tr>
                <td>Limes</td>
                <td>Green</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>Orange</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 4

我修改了内特巴尔的上述答案。前面的答案栏排列会变得拥挤。

样式

<style type="text/css">
.scrollableTable thead {
 display: block;
    //overflow-y: auto;
    width: 105%;
    height: 25px;
}
.scrollableTable tbody {
 display: block;
    overflow-y: auto;
    width: 105%;
    height: 200px;
}

表表

<table width="439" border="1" align="center" class="scrollableTable">
    <thead>
        <tr>
          <th width="20">No</th>
            <th width="140">Fruit</th>
          <th width="131">test</th>
          <th width="120">Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>1</td>
            <td>Apples</td>
            <td>ohyoijmnpkjoijikjm;kl</td>
            <td>Red</td>
        </tr>
        <tr>
          <td>2</td>
            <td>Bananas</td>
            <td>ghjghjghj</td>
            <td>Yellow</td>
        </tr>
        <tr>
          <td>3</td>
            <td>Oranges</td>
            <td>hfkjhkjhkhjkl</td>
            <td>Orange</td>
        </tr>
        <tr>
          <td>4</td>
          <td>fghgfmjhgjhgjhg</td>
          <td>hjkhjkgk</td>
          <td>fghfg</td>
        </tr>
        <tr>
          <td>5</td>
          <td>fghfg</td>
          <td>fgjfjfd</td>
          <td>gfh</td>
        </tr>
        <tr>
          <td>6</td>
          <td>fghfhj</td>
          <td>gjdfhgkgfk</td>
          <td>ghjgfk</td>
        </tr>
        <tr>
          <td>7</td>
          <td>jkgfk</td>
          <td>hjfkgfk</td>
          <td>hjlklh</td>
        </tr>
        <tr>
          <td>8</td>
          <td>hgjfgghjghj</td>
          <td>fgjkjhljk</td>
          <td>hjkj</td>
        </tr>
        <tr>
          <td>9</td>
          <td>jhkjkf</td>
          <td>fgjghj</td>
          <td>gkhkfjghhgjgh</td>
        </tr>
        <tr>
          <td>10</td>
          <td>fkjfhk</td>
          <td>hjg</td>
          <td>fjkhgk</td>
        </tr>
        <tr>
          <td>11</td>
          <td>ghkkh</td>
          <td>fghd</td>
          <td>ghkgh</td>
        </tr>
        <tr>
          <td>12</td>
          <td>kjhjklhgkjgljghjh</td>
          <td>hlg</td>
          <td>kjghkjhgkj</td>
        </tr>
        <tr>
          <td>13</td>
          <td>kgk</td>
          <td>d</td>
          <td>kkjhgklh</td>
        </tr>
        <tr>
          <td>14</td>
          <td>hkjhgkjhklj</td>
          <td>hjgk</td>
          <td>lhjljhgygyh</td>
        </tr>
        <tr>
          <td>15</td>
          <td>ijihgjil</td>
          <td>fg</td>
          <td>lhjoklh</td>
        </tr>
        <tr>
          <td>16</td>
          <td>lohkjl</td>
          <td>ghj</td>
          <td>lholhuhity</td>
        </tr>
        <tr>
          <td>17</td>
          <td>kgjhgikghiu</td>
          <td>ghjk</td>
          <td>ljhljkyhklj</td>
        </tr>
        <tr>
          <td>18</td>
          <td>kgihgik</td>
          <td>ghjg</td>
          <td>iuhgouygih8</td>
        </tr>
        <tr>
          <td>19</td>
          <td>uoiughuiohou</td>
          <td>ghkkj</td>
          <td>oijhoiyhigouohu</td>
        </tr>
        <tr>
          <td>20</td>
          <td>ihnohnjoikjnm</td>
          <td>fghfg</td>
          <td>ioojhjphiuhiuhohouh</td>
        </tr>            
    </tbody>
</table>

Answer 5

jQuery DataTables 可能不是您想要的，但是您研究过它吗？
数据表文档包括“FixedHeader”的特殊部分，因此您可以查看许多实现。

http://datatables.net/examples/

文档中的一些相关 DataTables 固定标头示例：

1. < a href="http://datatables.net/release-datatables/extras/FixedHeader/two_tables.html" rel="nofollow">http://datatables.net/release-datatables/extras/FixedHeader/two_tables.html

   <块引用>

   “以下示例显示了两个...表格，它们都启用了固定标题。页脚也是固定的...”

2. http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html

   <块引用>

   “此示例展示了如何使固定标题看起来更像电子表格应用程序。”