使用javascript/css修复了表头

我有一个如下所示的表格，我正在尝试创建一个固定的标题，这样无论我向下滚动多少次，标题对用户总是可见的。我没有太多的网页设计经验，所以我想知道如何使用css/javascript来实现这一点？我想我首先需要在

标记周围放置一个

标记，使它们成为一个实体？尽管这必须使用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>

服务器名
网络区
运行状态
w264521f
绿色
准备好的

---

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

对于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;
}  

并且设计应具有以下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>

@SW4不太好，我想问的是如何在JavascriptPlease中获取

标记，请在提问前使用。@Anonymous该答案使用Jquery，我无法使用。只有纯Javascript。好吧，这可能对你有用。@AkshaiShah不管怎样，在谷歌上搜索时，至少有三个不同的问题问同样的问题。

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