冻结表格的前2行

我已经看过Jquery插件和CSS样式来冻结表格的标题。有没有冻结前两行。我的第二行包含一个搜索文本框。我无法给行固定的宽度。冻结表格的前2行

<table> 
<thead> 
    <tr> 
    <th>Month</th> 
    <th>Savings</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td><input type="text"/></td> 
    <td><input type="text"/></td> 
    </tr> 
    <tr> 
    <td>February</td> 
    <td>$80</td> 
    </tr> 
</tbody> 
</table>

来源

2016-02-03 wintersolider

你可以使用DataTables吗？ –

“冻结”是什么意思？ – Aziz

@Aziz冻结标题。固定标题。 –

看起来像@卡尔达尔森的建议使用DataTables将工作。这里有一个工作演示： http://jsfiddle.net/C8Dtf/1903/

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
     <tr> 
      <th>Rendering engine</th> 
      <th>Browser</th> 
      <th>Platform(s)</th> 
      <th>Engine version</th> 
      <th>CSS grade</th> 
     </tr> 
     <!-- 2nd header row that will also be frozen --> 
     <tr> 
      <th>2Rendering engine</th> 
      <th>2Browser</th> 
      <th>2Platform(s)</th> 
      <th>2Engine version</th> 
      <th>2CSS grade</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="gradeX"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 4.0</td> 
      <td>Win 95+</td> 
      <td class="center">4</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Trident</td> 
      <td>Internet 
       Explorer 5.0</td> 
      <td>Win 95+</td> 
      <td class="center">5</td> 
      <td class="center">C</td> 
     </tr> 
     ... 
    </tbody> 
</table>

JS：

$(document).ready(function() 
{ 
    var iStart = new Date().getTime(); 
    var oTable = $('#example').dataTable( 
    { 
     "sScrollY": "300px", 
     "sScrollX": "100%", 
     "sScrollXInner": "150%", 
     "bScrollCollapse": true, 
     "bPaginate": false, 
     "bFilter": false 
    }); 
    new FixedColumns(oTable, 
    { 
     "sHeightMatch": "none" 
    }); 
});

从这个答案改编：https://stackoverflow.com/a/15826692/560114。我不熟悉DataTable插件的细节，但应该可以调整您的HTML，使其与本演示程序类似。

来源

2016-02-03 13:57:27

我想你想要像这个 -

CSS是不需要其他脚本这是纯..

结帐这个网址：

codepen.io/mastershine/pen/gPdaPL

来源

2016-02-03 14:12:16 webmasteravi

嗨，webmasteravi。请阅读“[我如何写出一个好答案]（http://stackoverflow.com/help/how-to-answer）” – fusion3k

@webmasteravi在这个例子中，第二行不是固定的（冻结），它在滚动时向上移动。 – wintersolider

嗨！再次检查..我已修复它.. – webmasteravi

冻结表格的前2行

回答

相关问题