html表第一行(第一行)与表头一起冻结

时间:2014-09-25 05:21:52

标签: jquery html css asp.net html5

在我的项目中使用html表。

我想让我的html表头和第一行冻结。我知道如何使标题冻结。但我无法修复第一行冻结。任何人都可以帮助我吗?

由于

2 个答案:

答案 0 :(得分:2)

使用代码段修改

我只会在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>

答案 1 :(得分:0)

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