Question

我见过Jquery插件和CSS样式来冻结表的标题。有没有冻结前两行。我的第二行包含一个用于搜索的文本框。我无法为行提供固定的宽度。

 <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>

Answer 1

看起来@ KarlDawson建议使用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，使其与此演示类似。

Answer 2

我想你想要这样的东西 -

这是纯粹的css，不需要其他脚本..

结帐此网址：

codepen.io/mastershine/pen/gPdaPL

冻结表格的前两行

2 个答案: