Исправлена ​​верхняя строка таблицы

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 в положение: абсолютное. Установите прокрутку тела.

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 в отдельный стол. Поместите эту таблицу абсолютно в другую оболочку. Такой подход может облегчить другие действия, такие как прокрутка головы на странице или добавление горизонтальной прокрутки.

Fiddle Вот рабочий пример. Обратите внимание: вам нужно убедиться, что панель результатов достаточно широка, чтобы просмотреть всю таблицу.

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