Прокручувана таблиця завантажувальної програми Twitter

Я хотів би мати стіл на своєму веб-сайті. Проблема полягає в тому, що ця таблиця матиме близько 400 рядків. Як я можу обмежити висоту таблиці та застосувати до неї смугу прокрутки? Це мій код:

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

Я спробував застосувати максимальну висоту та фіксовану висоту до таблиці, але це не працює.

Елементи таблиці не підтримують це безпосередньо. Помістіть таблицю у діві та встановіть висоту діва та встановіть overflow: auto.

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

Ви захочете загорнути його у свій власний div або надати цьому span3 ідентифікатор, щоб не впливати на весь ваш макет.

Ось загадка: http://jsfiddle.net/zm6rf/

Не потрібно загортати його в діві ...

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

Завантаження : http://www.bootply.com/AgI8LpDugl

У мене було те саме питання, і я використовував комбінацію вищезазначених рішень (і додав власний поворот). Зауважте, що мені довелося вказати ширину стовпців, щоб вони відповідали заголовку та тілу.

У моєму рішенні заголовок і колонтитул залишаються нерухомими, поки тіло прокручується.

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

А потім просто застосували таку CSS:

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

Я сподіваюся, що це допомагає комусь іншому.

Нещодавно мені довелося це зробити з bootstrap і angularjs, я створив angularjs директиву, яка вирішує проблему, ви можете побачити робочий приклад та деталі в цій публікації в блозі .

Ви використовуєте його лише додаючи атрибут фіксованого заголовка до тегу таблиці:

<table class="table table-bordered" fixed-header>
...
</table>

Якщо ви не використовуєте angularjs, ви можете налаштувати javascript директиви і використовувати її безпосередньо.

CSS

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

HTML

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

Це може не вирішити для великої кількості рядків. Я просто використовую трюк таблиці дублювання, щоб зробити роботу для таблиці невеликих підрахунків рядків, в той час як вона може зберігати ширину стовпців згину, ви можете спробувати цю скрипку .

(Стовпчик із фіксованою шириною - це метод, який я використовую для таблиці з великим підрахунком рядків, для якої потрібне лише дублювання рядка заголовка)

Приклад коду:

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

Поставте таблицю в div і дайте цьому діву клас pre-scrollable.

Нещодавно у мене була подібна проблема, і я закінчив її виправити за допомогою суміші різних рішень.

Першим і найпростішим було використання двох таблиць, однієї для заголовків і однієї для тіла. Це працює, але заголовки та стовпці тіла не вирівняні. І, оскільки я хотів використовувати автоматичний розмір, що поставляється із таблицями завантажувального твітера, я в кінцевому підсумку створив функцію Javascript, яка змінює заголовки, коли: тіло надається; розміри вікон змінені; дані у стовпці змінюються тощо.

Ось деякі з кодів, які я використовував:

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

Заголовки та тіло розділені на дві окремі таблиці. Один з них знаходиться всередині DIV з необхідним стилем для створення вертикальних смуг прокрутки. Ось CSS, який я використав:

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

Я прокоментував висоту тут, бо хотів, щоб таблиця досягла нижньої частини сторінки, якою б не була висота сторінки.

Атрибути сортування даних, які я використовував у заголовках, також використовуються у кожному td. Таким чином я міг отримати ширину та прокладку кожного td та ширину ряду. Використовуючи атрибути сортування даних, я встановлюю, використовуючи CSS, підкладку та ширину кожного заголовка відповідно та рядка заголовка, який завжди більший, оскільки у нього немає смуги прокрутки. Ось функція за допомогою 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

Тут я припускаю, що у вас є масив заголовків під назвою @headers.

Це не дуже, але це працює. Сподіваюся, це комусь допоможе.

Усі вищезазначені рішення також дозволяють прокручувати заголовок таблиці ... Якщо ви хочете прокручувати лише тіло, застосуйте це:

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

Жодна з цих відповідей не спрацювала для мене задовільно. Вони або не закріпили рядок заголовка таблиці на місці, або вимагали фіксованої ширини стовпців для роботи, і навіть тоді мали тенденцію до того, щоб рядки заголовка та рядки тіла не були вирівняні у різних браузерах.

Я рекомендую кусати кулю і використовувати належний контроль сітки, наприклад jsGrid або мого особистого улюбленого, SlickGrid . Очевидно, це запроваджує залежність, але якщо ви хочете, щоб ваші таблиці вели себе як справжні сітки з підтримкою крос-браузера, це допоможе вам врятувати волосся. Він також надає можливість сортування та зміни розмірів стовпців, а також тонн інших функцій, якщо ви хочете їх.

Пропозиція Ре Джонатана Вуда. У мене немає можливості обгортання таблиць новим дівом, оскільки я використовую CMS. Використання JQuery ось що я зробив:

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

Це обгортає елементи таблиці з новим дівом із класом "table-overflow".

Потім ви можете просто додати таке визначення у свій файл css:

.table-overflow { overflow: auto; }     

помістіть таблицю всередині div, щоб зробити прокручувану таблицю вертикально. змінити, overflow-yщоб overflow-xтаблиця прокручувалася горизонтально. просто overflowзробити так, щоб стіл прокручувався як горизонтальним, так і вертикальним.

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

Я подумав, що я опублікую тут, оскільки мені не вдалося змусити жодного з перерахованих вище працювати з Bootstrap 4. Я знайшов це в Інтернеті і працював ідеально для мене ...

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

Я також додав робочий jsfindle.

https://jsfiddle.net/jgngg28t/

Сподіваюся, це допоможе комусь іншому.