使用javascript / css修复表头[重复]

Posted 2023-03-06

【中文标题】使用javascript / css修复表头[重复]

【英文标题】：Fixed table header using javascript / css [duplicate]

【发布时间】：2014-07-01 00:17:18

【问题描述】：

我有一个如下所示的表格，并且正在尝试创建一个固定的标题，这样无论我向下滚动多少，标题始终对用户可见。我对网页设计没有太多经验，所以想知道如何使用 css / javascript 来做到这一点？我猜我首先需要在<th> 标签周围放置一个<thead> 标签以使它们成为一个实体？尽管这必须使用 javascript 来完成，因为 html 是使用我无法编辑的外部宏生成的。非常感谢任何帮助！

<table id="TBL1399802283490" class="confluenceTable">
  <tbody>
    <tr>
      <th class="confluenceTh" style="cursor: pointer;">Server Name  </th>
      <th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone  </th>
      <th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status  </th>
    </tr>
      <td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div>  </td>
      <td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div>  </td>
      <td class="confluenceTd"><div style="left:1em;right:1em"> READY </div>  </td>
    <tr>
    </tr>
  </tbody>
</table>

请注意，列的宽度不是固定的。它们需要是可变的，因为数据不是恒定的。

【问题讨论】：

@SW4 不是真的，我在问如何在Javascript中获取<thead>标签

提问前请使用google.com。

@Anonymous 该答案使用 Jquery，我无法使用。只有纯 Javascript。

这对你很有用。github.com/jmosbech/StickyTableHeaders

@AkshaiShah 无论哪种方式，在谷歌上搜索时至少有三个不同的问题问同样的问题。

【参考方案1】：

对于在 jquery 中具有固定标题的 gridview，请使用以下链接

[http://gridviewscroll.aspcity.idv.tw/Demo/Advanced.aspx#HeaderColumnMerge][1]

或者对于javascript参考以下代码，

function CreateGridHeader() 
 
    var DataDivObj = document.getElementById('<%=divmain.ClientID%>');
    var DataGridObj = document.getElementById('<%=gridview.ClientID%>');
    var HeaderDivObj = document.getElementById('<%=HeaderDiv.ClientID%>');
    //********* Creating new table which contains the header row ***********
    var HeadertableObj = HeaderDivObj.appendChild(document.createElement('table'));
    DataDivObj.style.paddingTop = '0px';        
    var DataDivWidth = DataDivObj.clientWidth;
    DataDivObj.style.width = '5000px';
    //********** Setting the style of Header Div as per the Data Div ************
    HeaderDivObj.className = DataDivObj.className;
    HeaderDivObj.style.cssText = DataDivObj.style.cssText;
    //**** Making the Header Div scrollable. *****
    HeaderDivObj.style.overflow = 'auto'; 
    //*** Hiding the horizontal scroll bar of Header Div ****
    //*** this is because we have to scroll the Div along with the DataDiv.  
    HeaderDivObj.style.overflowX = 'hidden';
    //**** Hiding the vertical scroll bar of Header Div **** 
    HeaderDivObj.style.overflowY = 'hidden'; 
    HeaderDivObj.style.height = '21px';
    //**** Removing any border between Header Div and Data Div ****
    HeaderDivObj.style.borderBottomWidth = '0px'; 
    //********** Setting the style of Header Table as per the GridView ************
    HeadertableObj.className = DataGridObj.className;
    //**** Setting the Headertable css text as per the GridView css text 
    HeadertableObj.style.cssText = DataGridObj.style.cssText; 
    HeadertableObj.border = '1px';
    HeadertableObj.rules = 'all';
    HeadertableObj.cellPadding = DataGridObj.cellPadding;
    HeadertableObj.cellSpacing = DataGridObj.cellSpacing;
    //********** Creating the new header row **********
    var Row = HeadertableObj.insertRow(0); 
    Row.className = DataGridObj.rows[0].className;
    Row.style.cssText = DataGridObj.rows[0].style.cssText;
    Row.style.fontWeight = 'bold';        
    //******** This loop will create each header cell *********
    for(var iCntr =0; iCntr < DataGridObj.rows[0].cells.length; iCntr++)
    
        var spanTag = Row.appendChild(document.createElement('td'));
        spanTag.innerHTML = DataGridObj.rows[0].cells[iCntr].innerHTML;
        var width = 0;
        //****** Setting the width of Header Cell **********
        if(spanTag.clientWidth > DataGridObj.rows[1].cells[iCntr].clientWidth)
        
            width = spanTag.clientWidth;
        
        else
        
            width = DataGridObj.rows[1].cells[iCntr].clientWidth;
        
        if(iCntr<=DataGridObj.rows[0].cells.length-2)
        
            spanTag.style.width = width + 'px';
        
        else
        
            spanTag.style.width = width + 20 + 'px';
        
        DataGridObj.rows[1].cells[iCntr].style.width = width + 'px';

    
    var tableWidth = DataGridObj.clientWidth;
    //********* Hidding the original header of GridView *******
    DataGridObj.rows[0].style.display = 'none';
    //********* Setting the same width of all the components **********
    HeaderDivObj.style.width = DataDivWidth + 'px';
    DataDivObj.style.width = DataDivWidth + 'px';    
    DataGridObj.style.width = tableWidth + 'px';
    HeadertableObj.style.width = tableWidth + 20 + 'px';
    return false;
  

在页面加载或任何你想要的地方调用上面的代码，

sub page_load()
   ScriptManager.RegisterStartupScript(Me, Me.GetType(), "CreateGridHeader", "javascript:CreateGridHeader()", True)
End Sub

并且设计应该有以下div的

<div id="divposgrid" style="width: 99.9%; border-bottom: 1px solid white;height: 220px;">
<div id="HeaderDiv" runat="server">
</div>
<div id="divmain" style="overflow: auto; height: 150px; margin-left: 1px; margin-top: 0px"  runat="server">
<`your table>
</div>
</div>