固定表顶部一排

Question

固定位置在这里没有帮助可能是我做错了什么。

第一行中的输入框在滚动时应保持冻结状态。我知道这已被回答，但没有任何解决方案正在工作。

http://jsfiddle.net/roshanjsachan/r8WDb/

.table{ 
text-align:center; 
overflow: auto; 
    table{ 
     width: 95%; 
     margin: auto; 
     margin-top: 5px; 
     } 
    } 
.table_scroll 
{ 
display:block; 
height:500px; 
overflow-y:scroll; 
} 

<div class="table"> 
<table class="table_scroll"> 
<tbody> 
<tr class="main_tr"> 
<th class="input_col"><input title="empno" placeholder="empno" type="text" class="col_data" id="empno" autocomplete="off"></th> 
<th class="input_col"><input title="name" placeholder="name" type="text" class="col_data" id="name" autocomplete="off"></th> 
<th class="input_col"><input title="job" placeholder="job" type="text" class="col_data" id="job" autocomplete="off"></th> 
<th class="input_col"><input title="boss" placeholder="boss" type="text" class="col_data" id="boss" autocomplete="off"></th> 
<th class="input_col"><input title="hiredate" placeholder="hiredate" type="text" class="col_data" id="hiredate" autocomplete="off"></th> 
<th class="input_col"><input title="salary" placeholder="salary" type="text" class="col_data" id="salary" autocomplete="off"></th> 
<th class="input_col"><input title="comm" placeholder="comm" type="text" class="col_data" id="comm" autocomplete="off"></th> 
<th class="input_col"><input title="deptno" placeholder="deptno" type="text" class="col_data" id="deptno" autocomplete="off"></th> 
</tr> 

<tr id="row1" class="remove table_row"> 
    <td>7369</td> 
    <td>SMITH</td> 
    <td>CLERK</td> 
    <td>7902</td> 
    <td>1980-12-17</td> 
    <td>800.00</td> 
    <td></td> 
    <td>20</td> 
</tr> 
<tr id="row2" class="remove table_row"> 
    <td>7370</td> 
    <td>ALLEN</td> 
    <td>CLERK</td> 
    <td>7902</td> 
    <td>1980-12-17</td> 
    <td>800.00</td> 
    <td></td> 
    <td>20</td> 
</tr> 
</tbody> 
</table> 
</div> 

Answer 1

注意：此答案仅适用于垂直滚动，并假定表格将水平放置。如果你需要水平滚动，你需要做更多的jQuery来监听滚动事件和更新样式。

问题1：列宽改变

选项1：在CSS组表格的布局：固定的和预定义的每个列的宽度。

选项2：使用jQuery测量列，然后应用表格布局：固定并设置每列的宽度。

var $table = $('table'); 
var $tbody = $table.find('tbody'); 
var $ths = $table.find('th'); 
var $tds = $table.find('tbody tr:first-child td'); //only need the first row 
var widths = []; 


//Measure the widths 
$ths.each(function(i, cell) { 
    var $cell = $(cell); 
    widths.push(
     cell.clientWidth //don't use jquery's width() it's inaccurate in cases with bordercollapse. 
     - parseFloat($cell.css('padding-right')) 
     - parseFloat($cell.css('padding-left')) 
    ); 
}); 

//Freeze the cells widths 
$ths.each(function(i, cell) { 
    $(cell).width(widths[i]); 
}); 
$tds.each(function(i, cell) { 
    $(cell).width(widths[i]); 
}); 

问题2：滚动

选项1：设置表，TBODY和THEAD到显示：块。将thead设置为绝对位置。设置tbody滚动。

table.freeze { 
    position:relative; 
    display:block; 
    table-layout:fixed; 
} 

table.freeze thead { 
    position: absolute; 
    left:0; 
    top:0; 
    display:block; 
    background-color:#fff; 
} 
table.freeze tbody { 
    height:200px; 
    overflow-y:auto; 
    overflow-x:hide; 
    display:block; 
} 

选项2：将thead克隆到一个单独的表中。将该表完全放在另一个包装中。这种方法可能会使其他行为更容易，例如页面滚动头或添加水平滚动。

小提琴 下面是一个工作示例。请注意，您需要确保结果窗格足够宽才能查看整个表格。

http://jsfiddle.net/shindigg/232Vv/1/

Answer 2

试着改变你的CSS：

.table_scroll 
{ 
display:block; 
height:500px; 
overflow-y:auto; 
} 

演示：http://jsfiddle.net/r8WDb/6/

Answer 3

入住这fiddle 您必须添加

tr.table_row td { 
    display:table-cell; 
}