Looking for fixed headers on a window adjustable table

佐手、 提交于 2019-12-05 09:11:54

Try this answer, It is working in IE8, Firefox and Chrome..

Style

    .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%; }

Table

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

or try this

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

You can use just standard HTML/CSS. Specifically, utilize display/overflow/height in your CSS and thead/tbody in your HTML. Example CSS:

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

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

This is a progressive-enhancement solution that should be cross-browser compatible, thanks to 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>

I modified above answer by Nate Barr. In the previous answer column alignment will become congested.

Style sheet

<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

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

jQuery DataTables may not be quite what you're looking for, but have you looked into it? The datatables documentation includes a special section for "FixedHeader", so you have a number of implementations you can review.

http://datatables.net/examples/

Some relevant DataTables Fixed header examples from the documentation:

  1. http://datatables.net/release-datatables/extras/FixedHeader/two_tables.html

    "The following example shows two ... tables both with FixedHeader enabled on them. The footer is also fixed..."

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

    "This example shows how FixedHeader can be made to look more like a spreadsheet application."

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!