凍結表格的前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行

回答

相關問題