固定表頂部一排

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