Twitter bootstrap scrollable table
Chciałbym mieć tabelę na mojej stronie. Problem polega na tym, że ta tabela będzie miała około 400 linii. Jak mogę ograniczyć wysokość tabeli i zastosować do niej pasek przewijania? To jest mój kod:
<div class="span3">
<h2>Achievements left</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Something</td>
</tr>
<tr>
<td>2</td>
<td>Something</td>
</tr>
<tr>
<td>3</td>
<td>Something</td>
</tr>
<tr>
<td>4</td>
<td>Something</td>
</tr>
<tr>
<td>5</td>
<td>Something</td>
</tr>
<tr>
<td>6</td>
<td>Something</td>
</tr>
</tbody>
</table>
<p><a class="btn" href="#">View details »</a></p>
</div>
Próbowałem zastosować maksymalną wysokość i stałą wysokość do stołu, ale to nie działa.
14 answers
Wydaje się, że elementy tabeli nie obsługują tego bezpośrednio. Umieść tabelę w div I ustaw wysokość div I ustaw overflow: 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
2014-03-22 06:14:42
.span3 {
height: 100px !important;
overflow: scroll;
}
Będziesz chciał zawinąć go w jego własny div lub nadać temu span3 własny identyfikator, aby nie wpływać na cały układ.
Oto skrzypce: http://jsfiddle.net/zm6rf/
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
2012-05-02 19:19:34
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-02-25 20:17:14
Miałem ten sam problem i użyłem kombinacji powyższych rozwiązań(i dodałem własny zwrot). Zauważ, że musiałem określić szerokości kolumn, aby zachować spójność między nagłówkiem a ciałem.
W moim rozwiązaniu nagłówek i stopka pozostają stałe podczas przewijania ciała.
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th width="25%">First Name</th>
<th width="13%">Last Name</th>
<th width="25%" class="text-center">Address</th>
<th width="25%" class="text-center">City</th>
<th width="4%" class="text-center">State</th>
<th width="8%" class="text-center">Zip</th>
</tr>
</thead>
</table>
<div class="bodycontainer scrollable">
<table class="table table-hover table-striped table-condensed table-scrollable">
<tbody>
<!-- add rows here, specifying same widths as in header, at least on one row -->
</tbody>
</table>
</div>
<table class="table table-hover table-striped table-condensed">
<tfoot>
<!-- add your footer here... -->
</tfoot>
</table>
</div>
A następnie po prostu zastosuj następujący CSS:
.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }
Mam nadzieję, że to pomoże komuś innemu.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-12-29 10:00:22
CSS
.achievements-wrapper { height: 300px; overflow: auto; }
HTML
<div class="span3 achievements-wrapper">
<h2>Achievements left</h2>
<table class="table table-striped">
...
</table>
</div>
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
2012-05-02 19:24:49
Ostatnio musiałem to zrobić z bootstrap i angularjs, stworzyłem dyrektywę angularjs, która rozwiązuje problem, możesz zobaczyć działający przykład i szczegóły na tym blogu .
Używasz go po prostu dodając atrybut fixed-header do tagu table:
<table class="table table-bordered" fixed-header>
...
</table>
Jeśli nie używasz angularjs, możesz zmodyfikować javascript dyrektywy i użyć go bezpośrednio.
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-07-18 00:05:54
Wszystkie powyższe rozwiązania powodują przewijanie nagłówka tabeli... Jeśli chcesz przewijać tylko tbody, zastosuj to:
tbody {
height: 100px !important;
overflow: scroll;
display: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-02 14:13:30
To nie jest rozwiązanie dla dużej liczby wierszy. Po prostu używam sztuczki z duplikacją tabeli, aby zrobić to dla tabeli z małą liczbą wierszy, podczas gdy może ona zachować szerokość kolumny flex, możesz spróbować tego fiddle .
(kolumna o stałej szerokości jest metodą, której używam dla tabeli z dużą liczbą wierszy, która wymaga powielania wiersza nagłówka)
Przykładowy Kod:
<div style="height:30px;overflow:hidden;margin-right:15px;">
<table class="table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cel 1,1</td>
<td>Cel 1,2</td>
<td>Cel 1,3</td>
</tr>
<tr>
<td>Cel 2,1</td>
<td>Cel 2,2</td>
<td>Cel 2,3</td>
</tr>
<tr>
<td>Cel 3,1</td>
<td>Cel 3,2</td>
<td>Cel 3,3</td>
</tr>
</tbody>
</table>
</div>
<div style="height:100px;overflow-y:scroll;;">
<table class="table">
<thead>
</thead>
<tbody>
<tr>
<td>Cel 1,1</td>
<td>Cel 1,2</td>
<td>Cel 1,3</td>
</tr>
<tr>
<td>Cel 2,1</td>
<td>Cel 2,2</td>
<td>Cel 2,3</td>
</tr>
<tr>
<td>Cel 3,1</td>
<td>Cel 3,2</td>
<td>Cel 3,3</td>
</tr>
<tr style="color:white">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</tbody>
</table>
</div>
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-12-27 06:14:13
Umieść tabelę w div I daj temu div klasę pre-scrollable
.
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-12-17 20:23:30
Ostatnio miałem podobny problem i skończyło się na naprawieniu go za pomocą mieszanki różnych rozwiązań.
Pierwszym i najprostszym było użycie dwóch tabel, jednej dla nagłówków i jednej dla ciała. To działa, ale nagłówki i kolumny ciała nie są wyrównane. A ponieważ chciałem użyć auto-rozmiar, który pochodzi z tabel Twitter bootstrap i skończyło się na tworzeniu funkcji Javascript, który zmienia nagłówki, gdy: ciało jest renderowane; okna jest zmieniany rozmiar; DANE w kolumnie zmiany itp.
Oto część kodu, którego użyłem:
<table class="table table-striped table-hover" style="margin-bottom: 0px;">
<thead>
<tr>
<th data-sort="id">Header 1</i></th>
<th data-sort="guide">Header 2</th>
<th data-sort="origin">Header 3</th>
<th data-sort="supplier">Header 4</th>
</tr>
</thead>
</table>
<div class="bodycontainer scrollable">
<table class="table table-hover table-striped table-scrollable">
<tbody id="rows"></tbody>
</table>
</div>
Nagłówki i treść są podzielone na dwie oddzielne tabele. Jeden z nich znajduje się wewnątrz DIV z niezbędnym stylem do generowania pionowych pasków przewijania. Oto CSS, którego użyłem:
.bodycontainer {
//height: 200px
width: 100%;
margin: 0;
}
.table-scrollable {
margin: 0px;
padding: 0px;
}
Skomentowałem wysokość tutaj, ponieważ chciałem, aby tabela dotarła do dołu strony, niezależnie od wysokości strony może być.
Atrybuty sortowania danych użyte w nagłówkach są również używane w każdym td. W ten sposób mógłbym uzyskaj szerokość i wyściółkę każdego td i szerokość wiersza. Używając atrybutów sortowania danych ustawiam za pomocą CSS wypełnienie i szerokość każdego nagłówka odpowiednio i wiersza nagłówka, który jest zawsze większy, ponieważ nie ma paska przewijania. Oto funkcja używająca coffeescript:
fixHeaders: =>
for header, i in @headers
tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
@$("th[data-sort=#{header}]").css('padding', tdpadding)
@$("th[data-sort=#{header}]").css('width', tdwidth)
if (i+1) == @headers.length
trwidth = @$("td[data-sort=#{header}]").parent().css('width')
@$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
@$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0
Tutaj zakładam, że masz tablicę nagłówków o nazwie @headers.
Nie jest ładny, ale działa. Mam nadzieję, że to komuś pomoże.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
2013-06-18 18:46:29
Żadna z tych odpowiedzi nie zadziałała dla mnie zadowalająco. Albo nie naprawili wiersza nagłówka tabeli w miejscu, albo wymagali stałych szerokości kolumn do pracy, a nawet wtedy mieli tendencję do tego, aby wiersze nagłówka i wiersze ciała były źle dopasowane w różnych przeglądarkach.
Polecam gryźć kulę i używać odpowiedniego sterowania siatką jak jsGrid lub Mój ulubiony, SlickGrid . Oczywiście wprowadza zależność, ale jeśli chcesz, aby Twoje tabele zachowywały się jak prawdziwe siatki z obsługa między przeglądarkami, pozwoli Ci to zaoszczędzić na wyrywaniu włosów. Daje również możliwość sortowania i zmiany rozmiaru kolumn oraz mnóstwo innych funkcji, jeśli chcesz.
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-02-20 01:35:59
/ Align = "center" bgcolor = "# e0ffe0 " / cesarz Chin / / align = center / Nie mam opcji owijania tabel z nowym div, ponieważ używam CMS. Używając JQuery oto co zrobiłem:
$( "table" ).wrap( "<div class='table-overflow'></div>" );
To zawija elementy tabeli nowym div z klasą "table-overflow".
Możesz po prostu dodać następującą definicję do pliku css:
.table-overflow { overflow: 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
2016-05-31 09:16:52
Można to zrobić, umieszczając ciało tabeli w div z następującymi stylami:
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
div.table-container {
height: 300px;
overflow-x: hidden;
overflow-y: auto;
margin-top: -20px;
}
Możemy zaimplementować przewijanie do tabeli przez:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
</table>
<div class="table-container">
<table class="table">
<tbody>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
<tr>
<th>John</th>
<th>$12,00</th>
</tr>
</tbody>
</table>
</div>
Demo robocze: https://jsfiddle.net/87L81aem/
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-11-05 11:18:53
Pomyślałem, że napiszę tutaj, ponieważ nie mogłem uzyskać żadnego z powyższych do pracy z Bootstrap 4. Znalazłem to w Internecie i działało idealnie dla mnie...
table
{
width: 100%;
display: block;
border:solid black 1px;
}
thead
{
display: inline-block;
width: 100%;
height: 20px;
}
tbody
{
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
th, td
{
width: 100px;
border:solid 1px black;
text-align:center;
}
Dołączyłem również działający jsfindle.
Mam nadzieję, że to pomoże komuś innemu.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 21:32:44