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

Question

我想修复我的表格标题。表存在于可滚动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>

下面是我的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;
}

Answer 1

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

我所做的是使用2个表，一个用于标题，一个是静态的，另一个表呈现单元格，我使用具有固定高度的div元素进行包装，并且使用overflow-y: auto;

启用滚动

另外，请确保使用table-layout: fixed;具有固定宽度td元素，以便在使用不带table的字符串时white space不会中断，因此为了打破该字符串使用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>

Answer 2

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

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

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

Answer 3

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

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

Answer 4

提供的其他示例均不适用于我的案例 - 例如滚动时标题与表格正文内容不匹配。我找到了一种更简单和干净的方法，允许您以正常方式设置表格，而无需太多代码。

示例：

.table-wrapper{
  overflow-y: scroll;
  height: 100px;
}

.table-wrapper th{
    position: sticky;
    top: 0;
    background-color: #FFF;
}

<div class="table-wrapper">
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
            <tr>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
            </tr>
        </tbody>
    </table>
</div>

感谢https://algoart.fr/articles/css-table-fixed-header

Answer 5

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

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

我只是给我想要滚动的表格id并在Javascript中添加一行。就是这样！

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

Answer 6

在position: sticky上使用th将达到目的。

注意：如果您在position: sticky或thead上使用tr，将无法正常工作。

https://jsfiddle.net/hrg3tmxj/

Answer 7

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

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

Answer 8

此代码适用于我。包括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>

Answer 9

使用StickyTableHeaders.js。

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

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