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

-4

Позиция фиксированная не помогает здесь, может быть, я делаю что-то неправильно.

Коды ввода в первой строке должны оставаться замороженными при прокрутке. Я знаю, что на это уже был дан ответ, но ни одно из решений не работает.

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>

спросил(а) 2013-08-07T15:01:00+04:00 7 лет, 1 месяц назад
0
56

Примечание. Этот ответ применяется только к вертикальной прокрутке и предполагает, что таблица будет располагаться горизонтально. Если вам нужна горизонтальная прокрутка, вам нужно будет сделать больше 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 width() it 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 для отображения: block. Установите 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/

ответил(а) 2013-08-08T01:47:00+04:00 7 лет, 1 месяц назад
57

Проверьте эту скрипку. Вы должны добавить


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

ответил(а) 2013-08-07T15:50:00+04:00 7 лет, 1 месяц назад
40

Попробуйте изменить css:

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

Демо: http://jsfiddle.net/r8WDb/6/

ответил(а) 2013-08-07T15:30:00+04:00 7 лет, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема