Stół stały nagłówek i przewijany korpus
Próbuję stworzyć tabelę ze stałym nagłówkiem i przewijalną zawartością za pomocą tabeli bootstrap 3. Niestety znalezione przeze mnie rozwiązania nie działają z bootstrap ani nie psują stylu.
Tutaj jest prosta tabela bootstrap, ale z jakiegoś powodu dla mnie nieznany wysokość tbody nie jest 10px.
height: 10px !important; overflow: scroll;
Przykład:
<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>
15 answers
Oto rozwiązanie robocze
HTML
<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>
CSS
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 do jsfiddle
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-19 04:55:51
Prawdopodobnie dostaniesz wiele tabel na jednej stronie, dlatego potrzebujesz klas CSS. Proszę znaleźć zmodyfikowane rozwiązanie @giulio na to.
Wystarczy zadeklarować w tabeli:
<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;
}
Należy pamiętać, że obecna implementacja pasuje Tylko do pięciu kolumn. Jeśli potrzebujesz innej liczby, Zmień parametr width z 20% do *100% / number_of_columns*.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-04 06:50:28
Używam StickyTableHeaders na Githubie i działa jak urok!
Musiałem dodać ten css, aby nagłówek nie był przezroczysty.
table#stickyHeader thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-17 09:51:10
Nie trzeba owijać go w 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-29 19:39:41
Fixed table head-CSS-only
Po prostu position: sticky; top: 0;
twoje th
elementy. (Chrome, FF, Edge)
.tableFixHead {
overflow-y: auto;
height: 100px;
}
.tableFixHead table {
border-collapse: collapse;
width: 100%;
}
.tableFixHead th,
.tableFixHead td {
padding: 8px 16px;
}
.tableFixHead th {
position: sticky;
top: 0;
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>
Stała Głowica stołu-za pomocą JS
Możesz użyć trochę JS i translateY th
elementy
JQuery przykład
var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
$th.css('transform', 'translateY('+ this.scrollTop +'px)');
});
.tableFixHead { overflow-y: auto; height: 100px; }
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>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Lub zwykły ES6 jeśli wolisz:
// Fix table head
function tableFixHead (e) {
const el = e.target;
el.querySelector("thead th").style.transform = `translateY(${el.scrollTop}px)`;
}
[...document.querySelectorAll(".tableFixHead")].forEach(el =>
el.addEventListener("scroll", tableFixHead)
);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-19 16:29:19
Późno na imprezę (Historia mojego życia), ale ponieważ jest to pierwszy wynik w google, a żadne z powyższych nie dało mi pracy, oto mój kod
/*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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-23 05:47:34
W moich oczach jedną z najlepszych wtyczek do jQuery jest DataTables .
Posiada również rozszerzenie dla fixed header i jest bardzo łatwo zaimplementowany.
Pobrane z ich strony:
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 );
} );
Ale najprostsze, jakie możesz mieć do zrobienia przewijalnego <tbody>
, to:
//configure table with fixed header and scrolling rows
$('#example').DataTable({
scrollY: 400,
scrollCollapse: true,
paging: false,
searching: false,
ordering: false,
info: false
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-29 14:32:47
Jest łatwiej z css
table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-29 17:43:13
Powinieneś spróbować użyć "display: block;" do tbody, ponieważ teraz jest to inline-block i aby ustawić wysokość, element powinien być "block"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-16 17:42:25
Miałem duży problem z uruchomieniem biblioteki stickytableheaders. Wykonując nieco więcej poszukiwań, znalazłem floatThead {[2] } jest aktywnie utrzymywaną alternatywą z najnowszymi aktualizacjami i lepszą dokumentacją.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-07 05:18:17
Oto mój copen pen o tym, jak zrobić stały nagłówek tabeli z przewijanymi wierszami i kolumnami. Kolumny mają również stałą szerokość, 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; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-18 01:13:21
Użyłem tego linku, stackoverflow.com/a/17380697/1725764 , Przez Hashem Qolami w oryginalnych postach' komentarze i używane display:inline-bloki zamiast pływaków. Naprawia granice, jeśli tabela ma klasę '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
}
}
Następnie wystarczy dodać szerokości td i 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%;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:15
Możesz umieścić dwa div, gdzie 1. div (nagłówek) będzie miał przezroczysty pasek przewijania, a 2. div będzie miał dane z widocznym / automatycznym paskiem przewijania. Próbka ma fragment kodu kątowego do zapętlania danych.
Poniższy kod zadziałał dla mnie -
<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>
Dodatkowy styl do ukrycia paska przewijania nagłówka-
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-30 22:04:00
O ile to teraz warte: wrzuciłem rozwiązanie do siostrzanego wątku przewijania tabeli z HTML i CSS Które
- zajmuje dwie tabele (jedna dla tylko nagłówka, jedna dla wszystkich-layout przez przeglądarkę)
- po layoutingu dostosuj górną (tylko nagłówek) tabelę do szerokości dolnej
- hide (
visibility
, notdisplay
) The header of the lower table and make the lower table scrollable w / in a div
Rozwiązanie jest niezależne od stylów / frameworków używany - więc może i tutaj się przyda...
Długi opis jest w zwój tabeli z HTML i CSS / kod jest również w tym pisaku: https://codepen.io/sebredhh/pen/QmJvKy
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-10 20:58:35
Najpierw dodaj jakieś znaczniki dla tabeli bootstrap. Tutaj utworzyłem tabelę z paskami, ale dodałem również niestandardową klasę tabeli .table-scroll
, która dodaje pionowy pasek przewijania do tabeli i sprawia, że nagłówek tabeli jest stały podczas przewijania w dół.
<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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-13 05:33:39