Twitter bootstrap прокручиваемая таблица

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


Я попытался применить max-height и fixed height к таблице, но это не работает.

728   14  

14 ответов:

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

214  
2014-03-22 08:14:42 
.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

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

вот скрипка:http://jsfiddle.net/zm6rf/

49  
2012-05-02 22:19:34

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

31  
2016-02-25 22:17:14

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

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

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

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

24  
2017-12-29 12: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>
8  
2012-05-02 22:24:49

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

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

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

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

8  
2014-07-18 03:05:54

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

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}
4  
2014-01-02 16:13:30

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

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

Пример Кода: 

<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>
4  
2014-12-27 08:14:13

поместите таблицу в div и дайте этому div класс pre-scrollable.

3  
2017-12-17 22:23:30

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

первым и самым простым было использовать две таблицы, одну для заголовков и одну для тела. Это работает, но заголовки и столбцы тела не выровнены. И поскольку я хотел использовать автоматический размер, который поставляется с таблицами начальной загрузки twitter, Я создал функцию Javascript, которая изменяет заголовки, когда: тело отображается; окна изменяются; данные в изменения, колонка, etc.

вот некоторые из кода, который я использовал:

        <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 и ширину строки. Используя атрибуты сортировки данных, я устанавливаю с помощью 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.

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

2  
2013-06-18 21:46:29

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

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

2  
2015-02-20 03:35:59

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

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

это обертывает элементы таблицы с новым div с классом "table-overflow".

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

.table-overflow { overflow: auto; }
2  
2016-05-31 12:16:52

Это можно сделать, поместив тело таблицы в 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>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
      <tr>
        <th>John</th>
        <th>,00</th>
      </tr>
    </tbody>
  </table>
</div>

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

0  
2017-11-05 13:18:53

решил, что я опубликую здесь, так как я не мог получить ничего из вышеперечисленного для работы с 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/

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

0  
2018-04-11 00:32:44

Comments

    Ничего не найдено.
Click here to cancel reply.