Таблица Html с фиксированными столбцами

Я пытаюсь сделать мои первые 3 столбца таблицы фиксированными так, чтобы они всегда показывались при прокрутке по горизонтали. Но они должны двигаться при прокрутке вертикальноТаблица Html с фиксированными столбцами

Я сделал таблицу первенствовать с тем, что он должен делать: enter image description here

Я попытался http://jsfiddle.net/YMvk9/5294/

.headcol { 
     position:absolute; 
     width:5em; 
     left:0; 
     top:auto; 
     border-right: 0px none black; 
     border-top-width:3px; 
     margin-top:-3px;

с scrollTop из JQuery правого скроллинга так Я перемещаю верхнее значение желтых клеток.

Текущая проблема заключается в том, что когда я заполняю таблицу html базой данных, отображаются желтые ячейки, даже если мой переполнение «прокручивается», поскольку они являются абсолютными.

Смотреть следующий файл: enter image description here

Любой способ исправить эту проблему. Так что они скрыты?

Или любое другое решение, что я должен сделать, буду оценен

источник

2014-11-04 Ecnerwal

я побежал один раз по тому же вопросу и я оказался настолько огромным, что я просто решил с помощью 3 таблицы: 1 для заголовки, 1 для фиксированных столбцов и 1 для прокручиваемых столбцов, все они завернуты в div с разными атрибутами. –

Я предпочел бы хранить его в одной таблице, так как я беру эту таблицу и отправляю ее функции, которая берет таблицу и экспортирует ее в excel, word, pdf. – Ecnerwal

Не уверен, что это возможно с вашей текущей структурой HTML. Вы думали об использовании плагина? В jQuery есть много хороших плагинов таблиц таблиц данных. Например, http://stackoverflow.com/questions/5622716/choosing-a-jquery-datagrid-plugin –

Вы можете использовать функцию прокрутки JQUERY и переместить столбец, который хотите «заморозить» в обратном порядке. Вам также нужно установить z-индекс, чтобы колонка оставалась поверх остальных.

В вашем CSS:

.frezedCell 
{ 
    z-index: 1000; 
    position:relative; 
}

В вашей странице:

$(document).ready(function() { 
    $(".divTableParts").scroll(function() { 
     var divTable = $(".divTableParts"); 
     $(".frezedCell").css("left", 0 + divTable.scrollLeft()); 
    }); 
});

источник

2014-11-04 20:06:09 Radek

Пробовал, он работает как шарм в Google Chrome, но IE медленно обновляется, поэтому он отстает, но делает то, что я хочу, чтобы он делал. Принято :) – Ecnerwal

Вы можете использовать DataTables для него: https://datatables.net/extensions/fixedcolumns/

В основном вы бы DataTables, как это зависимость и использовать этот кусок кода:

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "scrollY": "300px", 
     "scrollX": "100%", 
     "scrollCollapse": true, 
     "paging": false 
    }); 
    new $.fn.dataTable.FixedColumns(table); 
});

источник

2014-11-04 19:55:21 Xeli

Таблица Html с фиксированными столбцами

ответ

Смежные вопросы