如何冻结 HTML 表格中的标题行？答案

【问题标题】：How to freeze header row in HTML table?如何冻结 HTML 表格中的标题行？
【发布时间】：2011-09-24 00:42:04
【问题描述】：

我正在使用 HTML 表格并对其应用了垂直滚动，现在我想在滚动期间冻结标题行。我该怎么做？

【问题讨论】：

可以以更一般的方式提出问题。见this post。
冻结表头是 HTML 需要添加为单个属性的一项功能。这个问题到处都被问到，唯一的方法就是创建一些丑陋的黑客或下载一个比项目其余部分加起来有更多代码行的插件，这很糟糕。
试试这个stackoverflow.com/a/25902860/5123803你可以分四行解决

标签： html css scroll html-table

【解决方案1】：

查看这个 jQuery 插件。它可以让你冻结列并修复标题，就像你想要的那样。

http://gridviewscroll.aspcity.idv.tw/

【讨论】：

【解决方案2】：

未来寻求解决方案来创建带有锁定列标题的表：

这是主要 PortfolioList div 的 CSS，然后是 标题部分：

<style type="text/css">
    div.PortfolioList  
    {   /* bkgrnd color is set in Site.css, overflow makes it scrollable */
        height:500px; width:680px; position: static;  overflow-y:auto; float:left;                             
    }
    div.PortfolioList_hdr
    {   /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
        background-color:#7ac0da; height:45px; width:680px; position: static;  float:left;                             
    }    
</style>

现在这里是上面提到的两个 div 中的表格：

    <div class="PortfolioList_hdr">
       <table id="pftable_hdr">
        <caption>Portfolio Definitions</caption>
        <thead>
            <tr>
             <th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>                    
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<div class="PortfolioList">
    <table id="pftable">
        <tbody>
        </tbody>
    </table>
</div>

我使用 jQuery 添加 and 并相应地填充内容。

我希望这会有所帮助...

鲍勃

【讨论】：

【解决方案3】：

这似乎在 FF 中有效。

<table >  
    <thead><tr><th>This is my header</th></tr></thead>
    <tbody style="max-height:100px; overflow-y:auto; display:block">
        <tr>
            <td>col1</td>
        </tr>
        <tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr><tr>
            <td>col1</td>
        </tr>
    </tbody>
</table>

【讨论】：

当我尝试为 tbody 赋予样式时，它不起作用。我没有只滚动。
我用示例代码更新了我的答案。请尝试测试并告诉我。
这在 IE 中效果不佳。 Projapati，如果你想要 IE，你可能需要一些 javascript。
这个解决方案即使在 Firefox 上也几乎没有任何优点，因为它只支持一列，如果您的用例只有一列，那么您不需要处理表格数据，最好使用<div> 元素而不是 <table> 会给你同样的东西，只是它适用于所有浏览器，而不仅仅是 firefox。我投反对票是因为该帖子具有误导性，并且可能会让某人希望有一种简单的方法可以在不使用 2 个表的情况下支持 Firefox 中的固定表头。

【解决方案4】：

HTML：

<table>
 <tr id="header-row">
  <th>header col 1</th>
  <th>header col 2</th>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
 <tr>
 <tr>...</tr>
 ...
</table>

CSS：

#header-row { position:fixed; top:0; left:0; }
table {padding-top:15px; }

【讨论】：

当我尝试为 tbody 赋予样式时，它不起作用。我没有只滚动。
@David 它为我工作。但是 th 的宽度发生了变化:(如何解决这个问题？

【解决方案5】：

一种简单的方法是创建 2 个表格并固定列宽。第一个充当标题

下面的第二个表格是滚动条出现的地方，只有数据。

【讨论】：

我的表格行内容将动态显示，因此当我尝试使用两个表格时，如您建议的不同数据，tbody 行会有所不同，并且标题表和正文表之间看起来不匹配
@laxmi，尝试对两者都使用 CSS，这将得到照顾
认为这是一个优雅的解决方案，但是标题没有与列对齐，甚至关闭，唉！