Прокрутка таблицы загрузки

Я хотел бы иметь таблицу на моем веб-сайте. Проблема в том, что эта таблица будет содержать около 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>

Я попытался применить максимальную высоту и фиксированную высоту к таблице, но она не работает.

ОТВЕТЫ

Ответ 1

Элементы таблицы, похоже, не поддерживают это напрямую. Поместите таблицу в div и установите высоту div и установите overflow: auto.

Ответ 2

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

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

Здесь сценарий: http://jsfiddle.net/zm6rf/

Ответ 3

Не нужно обертывать его в 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

Ответ 4

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

В моем решении верхний и нижний колонтитулы остаются фиксированными, пока тело прокручивается.

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

Я надеюсь, что это поможет кому-то другому.

Ответ 5

Недавно мне пришлось сделать это с помощью бутстрапа и angularjs, я создал директиву angularjs, который решает проблему, вы можете увидеть рабочий пример и подробности в этом сообщении .

Вы используете его, просто добавив атрибут фиксированного заголовка в тег таблицы:

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

Если вы не используете angularjs, вы можете настроить редактор javascript и использовать его напрямую.

Ответ 6

CSS

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

HTML

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

Ответ 7

Все вышеперечисленные решения также делают прокрутку заголовка таблицы... Если вы хотите прокрутить текст только тогда, примените это:

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

Ответ 8

Это не может быть решением для большого количества строк. Я просто использую трюк таблицы дублирования, чтобы сделать это для таблицы подсчета маленьких строк, в то время как он может поддерживать ширину столбца flex, вы можете попробовать это fiddle,

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

Пример кода:   

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

Ответ 9

Недавно у меня была аналогичная проблема, и я решил ее исправить, используя смесь разных решений.

Первым и самым простым было использование двух таблиц: одного для заголовков и одного для тела. Это работает, но заголовки и столбцы тела не выровнены. И, поскольку я хотел использовать автоматический размер, который поставляется с твитер-бутстрап-таблицами, я создал 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() [email protected]$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

Здесь я предполагаю, что у вас есть массив заголовков, называемых @headers.

Это не очень, но это работает. Надеюсь, это поможет кому-то.

Ответ 10

Ни один из этих ответов не работал удовлетворительно для меня. Они либо не фиксировали строку заголовка таблицы на месте, либо требовали, чтобы фиксированные ширины столбцов работали, и даже тогда имели тенденцию смещать строки строк и строк заголовка в разных браузерах.

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

Ответ 11

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

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

Это обертывает элементы таблицы новым div с классом "переполнение таблицы".

Затем вы можете просто добавить следующее определение в свой файл css:

.table-overflow { overflow: auto; }

Ответ 12

Это можно сделать, разместив тело таблицы в div со следующими стилями:

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

Мы можем выполнить прокрутку к таблице:

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

Рабочая демонстрация: https://jsfiddle.net/87L81aem/