Przewijalna tabela ładowania początkowego Twittera

Chciałbym mieć tabelę na mojej stronie. Problem w 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 &raquo;</a></p>
</div>

Próbowałem zastosować maksymalną wysokość i stałą wysokość do stołu, ale to nie działa.

Wygląda na to, że elementy tabeli nie obsługują tego bezpośrednio. Umieść tabelę w div i ustaw wysokość div i set overflow: auto.

.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

Będziesz chciał umieścić go we własnym div lub nadać temu span3 własny identyfikator, aby nie wpływać na cały układ.

Oto skrzypce: http://jsfiddle.net/zm6rf/

Nie trzeba zawijać 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

Miałem ten sam problem i zastosowałem kombinację powyższych rozwiązań (i dodałem własny zwrot akcji). Zauważ, że musiałem określić szerokości kolumn, aby zachować spójność między nagłówkiem a treścią.

W moim rozwiązaniu nagłówek i stopka pozostają stałe podczas przewijania treści.

<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>

Następnie zastosowałem 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.

Niedawno musiałem to zrobić z bootstrapem i angularjs, stworzyłem dyrektywę angularjs, która rozwiązuje problem, możesz zobaczyć działający przykład i szczegóły w tym poście na blogu .

Używasz go po prostu dodając atrybut stałego nagłówka do tagu tabeli:

<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.

CSS

.achievements-wrapper { height: 300px; overflow: auto; }

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>

To może nie być rozwiązaniem w przypadku dużej liczby wierszy. Po prostu używam sztuczki z tabelą powielania, aby zrobić to dla małej tabeli z liczbą wierszy, podczas gdy może ona zachować szerokość kolumny flex, możesz wypróbować to skrzypce .

(Kolumna o stałej szerokości to metoda, której używam w przypadku dużej tabeli z liczbą wierszy, która wymaga tylko powielenia 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>

Umieść tabelę w elemencie div i przypisz mu klasę pre-scrollable.

Niedawno miałem podobny problem i ostatecznie naprawiłem go przy użyciu 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 z treścią nie są wyrównane. A ponieważ chciałem użyć rozmiaru automatycznego, który jest dostępny w tabelach ładowania początkowego na Twitterze, utworzyłem funkcję JavaScript, która zmienia nagłówki, gdy: renderowane jest ciało; okna są zmieniane; dane w kolumnie ulegną zmianie 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 tutaj wysokość, ponieważ chciałem, aby tabela sięgała do dołu strony, niezależnie od wysokości strony.

Atrybuty sortowania danych, których użyłem w nagłówkach, są również używane w każdym td. W ten sposób mogłem uzyskać szerokość i wypełnienie każdego td oraz szerokość rzędu. Używając atrybutów sortowania danych, ustawiłem za pomocą CSS odpowiednio dopełnienie i szerokość każdego nagłówka oraz 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 ładna, ale działa. Mam nadzieję, że to komuś pomoże.

Wszystkie powyższe rozwiązania powodują również przewijanie nagłówka tabeli ... Jeśli chcesz przewijać tylko do treści, zastosuj to:

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}

Żadna z tych odpowiedzi nie była dla mnie zadowalająca. Albo nie naprawili wiersza nagłówków tabeli, albo do działania wymagali stałych szerokości kolumn, a nawet wtedy mieli tendencję do nieprawidłowego wyrównania wierszy nagłówka i treści w różnych przeglądarkach.

Polecam ugryźć kulę i użyć odpowiedniej kontroli siatki, takiej jak jsGrid lub mój ulubiony, SlickGrid . To oczywiście wprowadza zależność, ale jeśli chcesz, aby twoje tabele zachowywały się jak prawdziwe siatki z obsługą wielu przeglądarek, zaoszczędzi ci to wyrywania włosów. Daje również opcję sortowania i zmiany rozmiaru kolumn oraz wielu innych funkcji, jeśli chcesz.

Re sugestia Jonathana Wooda. Nie mam opcji zawijania tabel nowym elementem div, ponieważ używam CMS. Oto co zrobiłem za pomocą JQuery:

$( "table" ).wrap( "<div class='table-overflow'></div>" );

Powoduje to zawinięcie elementów tabeli nowym elementem div z klasą „table-overflow”.

Następnie możesz po prostu dodać następującą definicję w swoim pliku css:

.table-overflow { overflow: auto; }     

umieść tabelę wewnątrz elementu div, aby przewijać tabelę w pionie. zmień overflow-yna, overflow-xaby umożliwić przewijanie tabeli w poziomie. tylko po overflowto, aby stół był przewijany zarówno w poziomie, jak iw pionie.

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>

Pomyślałem, że opublikuję tutaj, ponieważ nie mogłem zmusić żadnego z powyższych do pracy z Bootstrap 4. Znalazłem to online 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 też działające jsfindle.

https://jsfiddle.net/jgngg28t/

Mam nadzieję, że pomoże to komuś innemu.