html 表格第一行（第一个 <td>）与表格标题一起冻结答案

【问题标题】：html table first row (first <td>) freeze along with table headerhtml 表格第一行（第一个 <td>）与表格标题一起冻结
【发布时间】：2014-11-19 18:51:09
【问题描述】：

我在我的项目中使用 html 表格。

我想让我的 html 表头和第一行冻结。我知道如何使标题冻结。但我无法修复第一行冻结。谁能帮我解决这个问题？

谢谢

【问题讨论】：

你能分享一下你是如何修复标题的吗？
参考我的回答。 [1]：stackoverflow.com/questions/26030703/…

标签： jquery css asp.net html

【解决方案1】：

用片段修改

我会将特色/突出显示（第一）行放在thead 组中，它也会与您的标题行一起修复。

<style>
  table { width:100%; }
  table thead { position:fixed; }
  table thead tr th { text-align: left; }
  table tbody { position:absolute; top:60px; }
</style>

<table>
  <thead>
    <tr><th>Header</th></tr>
    <tr><td>Highlighted Row</td></tr>
  </thead>
  <tbody>
     <tr><td>Row 1</td></tr>
     <tr><td>Row 2</td></tr>
     <tr><td>Row 3</td></tr>
     <tr><td>Row 4</td></tr>
     <tr><td>Row 5</td></tr>
     <tr><td>Row 6</td></tr>
     <tr><td>Row 7</td></tr>
     <tr><td>Row 8</td></tr>
     <tr><td>Row 9</td></tr>
     <tr><td>Row 10</td></tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

我认为@Darshak Shekhda 的回答就足够了，但如果您需要更多解释，可以参考JSFiddle Example。您可以使用{ position:absolute; overflow:scroll; } 来实现您的设计。您可以使用:nth-child(rowNumber){ position:absolute; overflow:scroll; } 选择所需的行。希望这会有所帮助。

【讨论】：