:)Прокручиваемая проблема с телом
Я знаю, что этот вопрос задан очень много, но я пробовал много решений и просто не мог заставить его работать должным образом.
Мне нужно сделать труп моего стола прокручиваемым с фиксированными заголовками.
Для начала мой стол построен динамически и очень большой. 19 колонн и около 800 рядов.
Сначала я работал с плагином djatery datatables. После того как таблица находится в контейнере:
var tbl = createFilter('readDataTbl', '', condition);
$('#tableDiv').empty().append(tbl);
$('#readDataTbl').dataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false
});
но создает свиток х и заголовки заморожены так:
Тогда я попробовал решение CSS следующим образом :
<style>
table {
border-collapse: collapse;
width: 100%;
}
thead {
text-align:left;
display: table;
float: left;
width: 100%;
}
thead tr {
display: table-row;
width: 100%;
}
tbody {
display: block;
height: 120px;
overflow: auto;
float: left;
width: 100%;
}
tbody tr {
display: table;
width: 100%;
}
tbody tr {
height: 18px;
}
tbody td {
padding:1px 8px;
}
th, td {
width: 25%;
}
tr:after{ /* IE8 fix */
content: ".";
margin-left: -3px; /* to hide the content above tr */ /* not necessary if you are ok with 1px gap */
visibility: hidden;
}
</style>
Но это просто создает беспорядок в TBODY подобное:
Затем я попытался Thie метод из Here регулировки ширины ТХС после: CSS:
<style>
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
</style>
ЯШ:
var tbl = createFilter('readDataTbl', '', condition);
$('#tableDiv').empty().append(tbl);
var $table = $('table');
var $bodyCells = $table.find('tbody tr:first').children();
// Get the tbody columns width array
var colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function (i, v) {
$(v).width(colWidth[i]);
});
А потом Я заметил, что длинный текст THs сделал их такими большими:
Что может помочь мне достичь моей цели? Мысль о вставке divs внутри THs, но не уверен в этом.
Спасибо! :]
Спасибо за ваш комментарий. Вы хотите, чтобы образец таблицы работал? – Dvirski
Я сделал один образец, с двумя или тремя строками javascript, которые вы могли бы сделать его отлично работающим, по крайней мере, на большинстве основных браузеров. Я не был вокруг штабеля в течение нескольких лет. Так что медведь со мной в моем редактировании. –
Я допустил ошибку при копировании фрагмента. Проверьте последний блок в части css. Его заботятся. –