Таблица фиксированного заголовка и прокручиваемого тела
Я пытаюсь сделать таблицу с фиксированным заголовком и прокручиваемым содержимым, используя таблицу начальной загрузки 3. К сожалению, решения, которые я нашел, не работают с начальной загрузкой и не портят стиль.
Здесь есть простая таблица начальной загрузки, но мне почему-то неизвестно, высота тела не 10px.
height: 10px !important; overflow: scroll;
Пример:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>
Ответы
Ответ 1
Вот рабочее решение:
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>
Ответ 2
Фиксированная голова таблицы - только CSS
Просто position: sticky; top: 0; position: sticky; top: 0; твои th элементы. (Chrome, FF, Edge)
.tableFixHead { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
Ответ 3
Вероятно, вы получите несколько таблиц на одной странице, поэтому вам нужны классы CSS. Для этого вы найдете модифицированное решение @giulio.
Просто объявите его в таблице:
<table class="table table-striped header-fixed"></table>
CSS
.header-fixed {
width: 100%
}
.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
display: block;
}
.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
.header-fixed > tbody {
overflow-y: auto;
height: 150px;
}
.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
width: 20%;
float: left;
}
Имейте в виду, что текущая реализация соответствует только пяти столбцам. Если вам нужно другое число, измените параметр width от 20% до * 100%/number_of_columns *.
Ответ 4
Я использую StickyTableHeaders на GitHub и работает как шарм!
Мне пришлось добавить этот css, чтобы заголовок не был прозрачным, хотя.
table#stickyHeader thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
Ответ 5
Не нужно обертывать его в div...
CSS
tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}
table{
height:300px; // <-- Select the height of the table
display: -moz-groupbox; // Firefox Bad Effect
}
tbody{
overflow-y: scroll;
height: 200px; // <-- Select the height of the body
width: 100%;
position: absolute;
}
Bootply: http://www.bootply.com/AgI8LpDugl
Ответ 6
Проще css
table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }
Ответ 7
Поздно к вечеринке (Рассказ о моей жизни), но так как это первый результат в google, и ни один из вышеперечисленных не заставил меня работать, вот мой код
/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }
/*The next 3 sections make the magic happen*/
thead, tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
tbody {
display: block;
max-height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
td {
overflow: hidden;
text-overflow: ellipsis;
}
/*Use the following to make sure cols align correctly*/
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
}
/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
th:nth-child(1), td:nth-child(1) {
width: 85px;
}
th:nth-child(2), td:nth-child(2) {
width: 150px;
}
th:nth-child(4), td:nth-child(4) {
width: 125px;
}
th:nth-child(5) {
width: 102px;
}
td:nth-child(5) {
width: 85px;
}
Ответ 8
На мой взгляд, один из лучших плагинов для jQuery - это DataTables.
Он также имеет расширение для фиксированного заголовка, и его очень легко реализовать.
Взято с их сайта:
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function() {
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table );
} );
Но самое простое, что вы можете сделать, просто сделав прокручиваемый <tbody>:
//configure table with fixed header and scrolling rows
$('#example').DataTable({
scrollY: 400,
scrollCollapse: true,
paging: false,
searching: false,
ordering: false,
info: false
});
Ответ 9
Вам следует попробовать "display: block;" для tbody, потому что теперь он встроен в блок и для установки высоты элемент должен быть "block"
Ответ 10
У меня было много проблем с работой библиотеки stickytableheaders. Выполняя немного больше поиска, я нашел floatThead - активно поддерживаемая альтернатива с недавними обновлениями и лучшей документацией.
Ответ 11
Сначала добавьте некоторую разметку для таблицы начальной загрузки. Здесь я создал полосатую таблицу, но также добавил пользовательский класс таблицы .table-scroll который добавляет вертикальную полосу прокрутки к таблице и фиксирует заголовок таблицы при прокрутке вниз.
<div class="col-xs-8 col-xs-offset-2 well">
<table class="table table-scroll table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrew</td>
<td>Jackson</td>
<td>Washington</td>
</tr>
<tr>
<td>2</td>
<td>Thomas</td>
<td>Marion</td>
<td>Jackson</td>
</tr>
<tr>
<td>3</td>
<td>Benjamin</td>
<td>Warren</td>
<td>Lincoln</td>
</tr>
<tr>
<td>4</td>
<td>Grant</td>
<td>Wayne</td>
<td>Union</td>
</tr>
<tr>
<td>5</td>
<td>John</td>
<td>Adams</td>
<td>Marshall</td>
</tr>
<tr>
<td>6</td>
<td>Morgan</td>
<td>Lee</td>
<td>Lake</td>
</tr>
<tr>
<td>7</td>
<td>John</td>
<td>Henry</td>
<td>Brown</td>
</tr>
<tr>
<td>8</td>
<td>William</td>
<td>Jacob</td>
<td>Orange</td>
</tr>
<tr>
<td>9</td>
<td>Kelly</td>
<td>Davidson</td>
<td>Taylor</td>
</tr>
<tr>
<td>10</td>
<td>Colleen</td>
<td>Hurst</td>
<td>Randolph</td>
</tr>
<tr>
<td>11</td>
<td>Rhona</td>
<td>Herrod</td>
<td>Cumberland</td>
</tr>
<tr>
<td>12</td>
<td>Jane</td>
<td>Paul</td>
<td>Marshall</td>
</tr>
<tr>
<td>13</td>
<td>Ashton</td>
<td>Fox</td>
<td>Calhoun</td>
</tr>
<tr>
<td>14</td>
<td>Garrett</td>
<td>John</td>
<td>Madison</td>
</tr>
<tr>
<td>15</td>
<td>Fredie</td>
<td>Winters</td>
<td>Washington</td>
</tr>
</tbody>
</table>
</div>
CSS
.table-scroll tbody {
position: absolute;
overflow-y: scroll;
height: 250px;
}
.table-scroll tr {
width: 100%;
table-layout: fixed;
display: inline-table;
}
.table-scroll thead > tr > th {
border: none;
}
Ответ 12
Последнее добавленное положение: "липкое" было бы самым простым решением здесь
.outer{
overflow-y: auto;
height:100px;
}
.outer table{
width: 100%;
table-layout: fixed;
border : 1px solid black;
border-spacing: 1px;
}
.outer table th {
text-align: left;
top:0;
position: sticky;
background-color: white;
}
<div class = "outer">
<table>
<tr >
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
</table>
</div>
Ответ 13
Я использовал плагин floatThead jQuery (https://mkoryak.github.io/floatThead/#intro)
Документы говорят, что он работает с таблицами Bootstrap 3, и я могу сказать, что он также работает с таблицами Bootstrap 4 с или без помощника, реагирующего на таблицы.
Использовать плагин так же просто, как это:
HTML (ванильная разметка таблицы начальной загрузки)
<div class="table-responsive">
<table id="myTable" class="table table-striped">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
Инициализация плагина:
$(document).ready(function() {
var tbl=$('#myTable');
tbl.floatThead({
responsiveContainer: function(tbl) {
return tbl.closest('.table-responsive');
}
});
});
Полный отказ от ответственности: я не связан с плагином в любом случае. Я нашел его после нескольких часов попыток многих других решений, опубликованных здесь и в других местах.
Ответ 14
Для таблиц полной высоты (страница прокручивается, а не таблица)
Примечание: я перемещаю весь <thead>...</thead> потому что в моем случае у меня было две строки (заголовок и фильтры)
С JS (jQuery)
$( function() {
let marginTop = 0; // Add margin if the page has a top nav-bar
let $thead = $('.table-fixed-head').find('thead');
let offset = $thead.first().offset().top - marginTop;
let lastPos = 0;
$(window).on('scroll', function () {
if ( window.scrollY > offset )
{
if ( lastPos === 0 )
{
// Add a class for styling
$thead.addClass('floating-header');
}
lastPos = window.scrollY - offset;
$thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
}
else if ( lastPos !== 0 )
{
lastPos = 0;
$thead.removeClass('floating-header');
$thead.css('transform', 'translateY(' + 0 + 'px)');
}
});
});
CSS (только для стиля)
thead.floating-header>tr>th {
background-color: #efefef;
}
thead.floating-header>tr:last-child>th {
border-bottom: 1px solid #aaa;
}
Ответ 15
Я получил рабочее решение основного запроса, т.е.
Как получить "прокручиваемую" таблицу с "фиксированным" заголовком?
Вот что я сделал (заполняемые данные предназначены только для демонстрации):
Ниже приведены мои коды CSS и HTML:
div.ex1 {
width: 640px;
height: 310px;
overflow: auto;
}
table { border-collapse: collapse; width: 100%; }
th { background: teal; padding: 8px 16px; }
.tableFixHead {
overflow: auto;
}
.tableFixHead thead th {
position: sticky;
top: 0;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="tableFixHead ex1 text-nowrap w3-container w3-responsive">
<table class="table table-striped w-auto w3-table-all w3-hoverable w3-bordered">
<thead>
<tr class="w3-theme">
<th>Director Name</th>
<th>Motion Picture</th>
<th>Year Released</th>
<th>Rating</th>
</tr>
</thead>
<tbody >
<tr>
<td>Francis Ford Coppola</td>
<td>The Godfather</td>
<td>1972</td>
<td>9.2</td>
</tr>
<tr>
<td>Steven Spielberg</td>
<td>Schindler List</td>
<td>1993</td>
<td>8.9</td>
</tr>
<tr>
<td>Sidney Lumet</td>
<td>12 Angry Men</td>
<td>1957</td>
<td>8.9</td>
</tr>
<tr>
<td>Robert Benigni</td>
<td>Life Is Beautiful</td>
<td>1997</td>
<td>8.6</td>
</tr>
<tr>
<td>Sergio Leone</td>
<td>The Good, the Bad and the Ugly</td>
<td>1966</td>
<td>8.8</td>
</tr>
<tr>
<td>Frank Darabont</td>
<td>The Shawshank Redemption</td>
<td>1994</td>
<td>9.3</td>
</tr>
<tr>
<td>Bautista</td>
<td>The Pursuit of Happyness</td>
<td>2006</td>
<td>8.0</td>
</tr>
</tbody>
</table>
</div>
Ответ 16
Вы можете разместить два div, где 1-й div (Header) будет иметь прозрачную полосу прокрутки, а второй div будет иметь данные с видимой/автоматической полосой прокрутки. Пример имеет angular фрагмент кода для обработки данных.
Ниже код работал у меня -
<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
<div class="row">
<div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
<div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
<div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
</div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
<div>
<div class="row" ng-repeat="row in rows">
<div class="col-lg-3 col-xs-3">{{row.col1}}</div>
<div class="col-lg-6 col-xs-6">{{row.col2}}</div>
<div class="col-lg-3 col-xs-3">{{row.col3}}</div>
</div>
</div>
</div>
Дополнительный стиль, чтобы скрыть панель прокрутки заголовка -
<style>
#transparentScrollbarDiv::-webkit-scrollbar {
width: inherit;
}
/* this targets the default scrollbar (compulsory) */
#transparentScrollbarDiv::-webkit-scrollbar-track {
background-color: transparent;
}
/* the new scrollbar will have a flat appearance with the set background color */
#transparentScrollbarDiv::-webkit-scrollbar-thumb {
background-color: transparent;
}
/* this will style the thumb, ignoring the track */
#transparentScrollbarDiv::-webkit-scrollbar-button {
background-color: transparent;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
#transparentScrollbarDiv::-webkit-scrollbar-corner {
background-color: transparent;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>
Ответ 17
Вот моя копия, как сделать заголовок фиксированной таблицы с прокручиваемыми строками и столбцами. Столбцы также имеют фиксированную ширину, http://codepen.io/abhilashn/pen/GraJyp
<!-- Listing table -->
<div class="row">
<div class="col-sm-12">
<div class="cust-table-cont">
<div class="table-responsive">
<table border="0" class="table cust-table">
<thead>
<tr style="">
<th style="width:80px;">#</th>
<th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>
<th style="width:250px;">Title</th>
<th style="width:200px;">Company</th>
<th style="width:100px;">Priority</th>
<th style="width:120px;">Type</th>
<th style="width:150px;">Assigned to</th>
<th style="width:120px;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th style="width:80px;">1</th>
<td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td style="width:250px;">Lorem ipsum dolor sit</td>
<td style="width:200px;">lorem ispusm</td>
<td style="width:100px;">high</td>
<td style="width:120px;">lorem ipsum</td>
<td style="width:150px;">lorem ipsum</td>
<td style="width:120px;">lorem ipsum</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">4</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">5</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">6</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">7</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">8</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">9</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">10</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">11</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<th scope="row">12</th>
<td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
<td>Lorem ipsum dolor sit</td>
<td>lorem ispusm</td>
<td>high</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- End of cust-table-cont block -->
</div>
</div> <!-- ENd of row -->
.cust-table-cont { width:100%; overflow-x:auto; }
.cust-table-cont .table-responsive { width:1190px; }
.cust-table { table-layout:fixed; }
.cust-table thead, .cust-table tbody {
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; }
Ответ 18
Для чего бы это ни стоило сейчас: я опубликовал решение для прокрутки Table -thread- Table с HTML и CSS, которое
- занимает две таблицы (одна только для заголовка, одна для всех - выложенная браузером)
- после компоновки отрегулируйте верхнюю (только для заголовка) таблицу по ширине нижней
- скрыть (
visibility, не display) заголовок нижней таблицы и сделать прокрутку нижней таблицы ж/в div
Решение не зависит от любых используемых стилей/фреймворков - так что, может быть, оно будет полезно и здесь...
Подробное описание приведено в разделе " Прокрутка таблиц с использованием HTML и CSS". Код также находится в этом пере: https://codepen.io/sebredhh/pen/QmJvKy.
Ответ 19
Чистое решение (только CSS)
.table-fixed tbody {
display:block;
height:85vh;
overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
display:table;
width:100%;
}
<table class="table table-striped table-fixed">
<thead>
<tr align="center">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
</tr>
<tr>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
</tr>
</tbody
</table
Ответ 20
Теперь, когда "все" браузеры поддерживают ES6, я включил различные предложения, приведенные выше, в класс JavaScript, который принимает таблицу в качестве аргумента и делает тело прокручиваемым. Это позволяет механизму макета браузера определять ширину заголовка и ячейки тела, а затем сопоставлять ширину столбцов.
Высота таблицы может быть установлена явно или сделана так, чтобы заполнять оставшуюся часть окна браузера, и обеспечивает обратные вызовы для таких событий, как изменение размера области просмотра и/или открытие или закрытие элементов details.
Доступна поддержка многострочных заголовков, и она особенно эффективна, если таблица использует атрибуты id/headers для доступности, как указано в Руководстве по WCAC, что не является таким обременительным требованием, как может показаться.
Код не зависит от каких-либо библиотек, но хорошо играет с ними, если они используются. (Проверено на страницах, использующих JQuery).
Код и пример использования доступны на Github.
Ответ 21
Использовал эту ссылку, fooobar.com/questions/26056/..., с помощью Hashem Qolami в комментариях к исходным сообщениям и использовал отображение: inline-blocks вместо float.
Исправляет границы, если таблица также имеет класс "table-bordered".
table.scroll {
width: 100%;
&.table-bordered {
td, th {
border-top: 0;
border-right: 0;
}
th {
border-bottom-width: 1px;
}
td:first-child,
th:first-child {
border-right: 0;
border-left: 0;
}
}
tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
tbody, thead {
display: block;
}
tr {
width: 100%;
display: block;
}
th, td {
display: inline-block;
}
td {
height: 46px; //depends on your site
}
}
Затем просто добавьте ширины td и th
table.table-prep {
tr > td.type,
tr > th.type{
width: 10%;
}
tr > td.name,
tr > th.name,
tr > td.notes,
tr > th.notes,
tr > td.quantity,
tr > th.quantity{
width: 30%;
}
}
Ответ 22
Я сделал какое-то работающее CSS-решение, используя position: sticky. Должен работать на вечнозеленых браузерах. Попробуйте изменить размер браузера. Все еще есть некоторая проблема с макетом в FF, она будет исправлена позже, но по крайней мере заголовки таблиц обрабатывают вертикальную и горизонтальную прокрутку. Пример Codepen
Ответ 23
HTML
<!DOCTYPE html>
<html>
<head>
<title>RoboPage</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th class="col-md-3 col-sm-3 ">First Name</th>
<th class="col-md-3 col-sm-3 ">Last Name</th>
<th class="col-md-6 col-sm-6 ">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3 col-sm-3">Top Row</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">[email protected]</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">[email protected]</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">[email protected]</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">[email protected]</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">[email protected]</td>
</tr>
<tr>
<td class="col-md-3 col-sm-3">John</td>
<td class="col-md-3 col-sm-3">Doe</td>
<td class="col-md-6 col-sm-6">[email protected]</td>
</tr>
</tbody>
</table>
</div>
<script src='practice.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
CSS
thead,tbody,tr,td,th{
display:block;
}
tbody{
height:200px;
overflow-y:auto;
width: 100%;
}
thead > tr > th, tbody > tr > td{
float:left;
}
Ответ 24
Поддержка нескольких прокручиваемых таблиц в одном окне.
Чистый CSS & Не фиксированный или липкий.
Я ищу фиксированный заголовок таблицы с автоматическими "td" и "th" шириной в течение многих лет. Наконец я что-то кодировал, это хорошо работает для меня, но я не уверен, что это работает хорошо для всех.
Проблема 1: Мы не можем установить высоту таблицы или tbody, пока у нас есть тонны "tr" из-за свойств таблицы по умолчанию.
Решение: Установите для таблицы свойство отображения.
Проблема 2: Когда мы устанавливаем свойство отображения, ширина элементов "td" не может быть равна ширине элементов "th". И трудно заполнить элементы правильно в таблице полной ширины, как 100%.
Решение: CSS "flex" является очень хорошим решением для настроек ширины и заполнения, поэтому мы будем создавать наши элементы tbody и thead с помощью CSS "flex".
.ea_table {
border: 1px solid #ddd;
display: block;
background: #fff;
overflow-y: hidden;
box-sizing: border-box;
float: left;
height:auto;
width: 100%;
}
.ea_table tbody, thead {
flex-direction: column;
display: flex;
}
.ea_table tbody {
height: 300px;
overflow: auto;
}
.ea_table thead {
border-bottom: 1px solid #ddd;
}
.ea_table tr {
display: flex;
}
.ea_table tbody tr:nth-child(2n+1) {
background: #f8f8f8;
}
.ea_table td, .ea_table th {
text-align: left;
font-size: 0.75rem;
padding: 1.5rem;
flex: 1;
}
<table class="ea_table">
<thead>
<tr>
<th>Something Long</th>
<th>Something </th>
<th>Something Very Long</th>
<th>Something Long</th>
<th>Some</th>
</tr>
</thead>
<tbody>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem </td>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
</tbody>
</table>
Ответ 25
Этого легко достичь с помощью таблиц div.
.td.header {
position: sticky;
top:0px;
}
Проверьте этот jsfiddle для простого примера.
Ответ 26
поместите таблицу внутри div таким образом, чтобы сделать таблицу с возможностью прокрутки вертикально. измените overflow-y на overflow-x чтобы сделать таблицу прокручиваемой по горизонтали. просто overflow чтобы сделать таблицу прокручиваемой как горизонтальной, так и вертикальной.
<div style="overflow-y: scroll;">
<table>
...
</table>
</div>
Ответ 27
table {
display: block;
}
thead, tbody {
display: block;
}
tbody {
position: absolute;
height: 150px;
overflow-y: scroll;
}
td, th {
min-width: 100px !important;
height: 25px !important;
overflow:hidden !important;
text-overflow: ellipsis !important;
max-width: 100px !important;
}
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden">
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Username</th>
<th>Password</th>
<th>First Name</th>
<th>Last Name</th>
<th>Col16</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
<th>Col15</th>
<th>Col16</th>
<th>Col17</th>
<th>Col18</th>
</tr>
</thead>
<tbody>
</tbody>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
</table>
</div>'enter code here'
