如何在可滚动的div中制作固定的头表？

I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.

我想固定我的桌子的标题。表存在于可滚动div中。以下是我的代码。

<div id="table-wrapper">
    <div id="table-scroll">
        <table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Order Date</th>
                    <th>Status</th>
                    <th>Vol Number</th>
                    <th>Bonus Paid</th>
                    <th>Reason for no Bonus</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><%=snd.getOrderId()%></td>
                    <td><%=snd.getDateCaptured()%></td>
                    <td><%=snd.getOrderStatus()%></td>
                    <td>Data Not Available</td>
                    <td>Data Not Available</td>
                    <td>Data Not Available</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Below is my CSS, which I am using for the above div:

下面是我的CSS，我用于上面的div：

#table-wrapper {
    position:relative;
}

#table-scroll {
    height:250px;
    overflow:auto;  
    margin-top:20px;
}

#table-wrapper table {
    width:100%;
}

#table-wrapper table * {
    background:white;
    color:black;
}

#table-wrapper table thead th .text {
    position:absolute;   
    top:-20px;
    z-index:2;
    height:20px;
    width:35%;
    border:1px solid red;
}

8 个解决方案

#1

How about doing something like this? I've made it from scratch...

做这样的事情怎么样？我是从零开始做的......

What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div element with a fixed height, and to enable scroll, am using overflow-y: auto;

我所做的是使用2个表，一个用于标题，总是静态，另一个表呈现单元格，我使用具有固定高度的div元素包装，并启用滚动，使用溢出 - y：auto;

Also make sure you use table-layout: fixed; with fixed width td elements so that your table doesn't break when a string without white space is used, so inorder to break that string am using word-wrap: break-word;

还要确保使用table-layout：fixed;使用固定宽度的td元素，以便在使用没有空格的字符串时表不会中断，所以为了使用word-wrap打破该字符串：break-word;

Demo

演示

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>
        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
        <!-- Some more tr's -->
    </table>
    </div>
</div>

#2

Some of these answers seem unnecessarily complex. Make your tbody:

其中一些答案似乎不必要地复杂。做你的tbody：

display: block; height: 300px; overflow-y: auto

Then manually set the widths of each column so that the thead and tbody columns are the same width. Setting the table's style="table-layout: fixed" may also be necessary.

然后手动设置每列的宽度，使thead和tbody列的宽度相同。设置表格的样式=“table-layout：fixed”也可能是必要的。

#3

I think you need something like this ?

我觉得你需要这样的东西？

Like this http://s13.postimage.org/rv6jqaxvr/tabel_fixed_header.jpg

喜欢这个http://s13.postimage.org/rv6jqaxvr/tabel_fixed_header.jpg

.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid    grey;}

</style>

<table class="table">
<thead>
    <tr>
    <th>Judul1</th>
    <th>Judul2</th>
    <th>Judul3</th>
    <th>Judul4</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td colspan="4">
      <div class="table-wrap" >
      <table class="table-dalam">
         <tbody>
             <?php foreach(range(1,10) as $i): ?>
                 <tr >
                     <td class="td-nya">td1 </td>
                     <td class="td-nya">td2</td>
                     <td class="td-nya">td2</td>
                     <td class="td-nya">td2</td>
                 </tr> 
            <?php endforeach;?>
        </tbody>
       </table>
     </div>
   </td>
 </tr>
  </tbody>
 </table>

Source

资源

#4

I needed the same and this solution worked the most simple and straightforward way:

我需要相同的，这个解决方案以最简单直接的方式工作：

http://www.farinspace.com/jquery-scrollable-table-plugin/

http://www.farinspace.com/jquery-scrollable-table-plugin/

I just give an id to the table I want to scroll and put one line in Javascript. That's it!

我只是给我想要滚动的表格的id，并在Javascript中放一行。而已！

By the way, first I also thought I want to use a scrollable div, but it is not necessary at all. You can use a div and put it into it, but this solution does just what we need: scrolls the table.

顺便说一句，首先我还以为我想使用可滚动的div，但根本没有必要。您可以使用div并将其放入其中，但此解决方案正是我们所需要的：滚动表格。

#5

This is my "crutches" solution by using html and css. There used 2 tables and fixed width of tables and table cell`s

这是我使用html和css的“拐杖”解决方案。使用了2个表和固定宽度的表和表格单元格

https://jsfiddle.net/babaikawow/s2xyct24/1/

https://jsfiddle.net/babaikawow/s2xyct24/1/

HTML:

HTML：

  <div class="container">
<table class="table" border = 1; >  <!-- fixed width header -->
                            <thead >
                                <tr>
                                    <th class="tbDataId" >№</th>
                                    <th class="tbDataName">Працівник</th>
                                    <th class="tbDataData">Дата</th>
                                    <th class="tbDataData">Дійсно до</th>
                                    <th class="tbDataDiseases">Критерій1</th>
                                    <th class="tbDataDiseases">Критерій2</th>
                                    <th class="tbDataDiseases">Критерій3</th>
                                    <th class="tbDataDiseases">Критерій4</th>
                                    <th class="tbDataDiseases">Критерій5</th>  
                                </tr>
                            </thead>  
                        </table> 

                        <div class="scrollTable"> <!-- scrolling block -->
                            <table class="table" border = 1;>
                                 <tbody>
                   <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                                </tbody>
                            </table>
                        </div> 
</div>

CSS:

CSS：

*{
  box-sizing: border-box;
}

.container{
 width:1000px;
}
.scrollTable{

    overflow: scroll;
  overflow-x: hidden;
    height: 100px;
} 
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse; 

}

/*   Styles of the th and td  */

/* Id */
.tbDataId{
    width:5%;
}

/* Дата,
Дійсно до */
.tbDataData{
    /*width:170px;*/
    width: 15%;
}

/* П І Б */
.tbDataName{
    width: 15%;
}

/*Критерії */
.tbDataDiseases{
    width:10%;
}

#6

A Fiddle would have been more helpful nevertheless from what I understand, I guess what you need is persistent headers, look into this

根据我的理解，小提琴本来会更有帮助，我想你需要的是持久性标题，请看看

http://css-tricks.com/persistent-headers/

http://css-tricks.com/persistent-headers/

#7

This code works form me. Include the jquery.js file.

这段代码构成了我。包括jquery.js文件。

<!DOCTYPE html>
<html>

<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){

var contentDivId = "contentDiv";
var headerDivId = "headerDiv";

var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings'); 

/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/

fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
 /*Start : Place header row cell and content table first row cell inside <DIV>*/ 
            var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
            for (k = 0; k < contentFirstRowCells.length; k++) {
                $( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
            }
            var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
            for (k = 0; k < headerFirstRowCells.length; k++) {
                $( headerFirstRowCells[k] ).wrapInner( "<div></div>");
            }
 /*End : Place header row cell and content table first row cell inside <DIV>*/ 

 /*Start : Fix width for columns of header cells and content first ror cells*/
            var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
            var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
            for (i = 0; i < contentColumns.length; i++) {
                if (i == contentColumns.length - 1) {
                    contentCellWidth = contentColumns[i].offsetWidth;
                }
                else {
                    contentCellWidth = contentColumns[i].offsetWidth;
                }
                headerCellWidth = headerColumns[i].offsetWidth;
                if(contentCellWidth>headerCellWidth){
                $(headerColumns[i]).css('width', contentCellWidth+"px");
                $(contentColumns[i]).css('width', contentCellWidth+"px");
                }else{
                $(headerColumns[i]).css('width', headerCellWidth+"px");
                $(contentColumns[i]).css('width', headerCellWidth+"px");
                }
            }
/*End : Fix width for columns of header and columns of content table first row*/
}   

    function OnScrollDiv(Scrollablediv) {
    document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
    }
function radioCount(){
    alert(document.form.elements.length);

}   
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>

</head>

<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
  <td><div>Firstname</div></td>
  <td><div>Lastname</div></td>      
  <td><div>Points</div></td>
  </tr>

<tr>
  <td><div>Jillsddddddddddddddddddddddddddd</div></td>
  <td><div>Smith</div></td>     
  <td><div>50</div></td>
  </tr-->

  <tr id="tableColumnHeadings" class="tableColumnHeadings">
  <td>&nbsp;</td>

  <td>Firstname</td>
  <td>Lastname</td>     
  <td>Points</td>
  </tr>

<tr style="height:0px">
<td></td>
  <td></td>
  <td></td>     
  <td></td>
  </tr>

<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
  <td>Jillsddddddddddddddddddddddddddd</td>
  <td>Smith</td>        
  <td>50</td>
  </tr>

<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>Eve</td>
  <td>Jackson</td>      
  <td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td><div>Jillsddddddddddddddddddddddddddd</div></td>
  <td><div>Smith</div></td>     
  <td><div>50</div></td>
  </tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>Eve</td>
  <td>Jackson</td>      
  <td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
</table>
</div>

</form>
</body>

</html>

#8

use StickyTableHeaders.js for this.

使用StickyTableHeaders.js。

Header was transparent . so try to add this css .

标题是透明的。所以尝试添加这个CSS。

thead {
    border-top: none;
    border-bottom: none;
    background-color: #FFF;
}