Вопрос по twitter-bootstrap – Твиттер-скроллинг с возможностью прокрутки

136

Я хотел бы иметь таблицу на моем сайте. Проблема в том, что в этой таблице будет около 400 строк. Как я могу ограничить высоту стола и применить к ней полосу прокрутки? Это мой код:

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

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

Ваш Ответ

13   ответов
2

новым div, как я использую CMS. Используя JQuery, вот что я сделал:

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

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

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

.table-overflow { overflow: auto; }     
4

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

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

Sample Code:

<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>
52
.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

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

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

Я только применил это к определенному span3. Можно ли сохранить относительную высоту и при этом иметь рядом с таблицей полосу прокрутки? pangi
Можете ли вы сделать это, заставляя тело ругаться, а теаду - нет?
Обратите внимание, что "! Важный" не важно;)
Будьте осторожны, устанавливая эти свойства для.span3 повлияетall span3 элементы по всему сайту, управляемому Bootstrap.
Вы можете добавить процент высоты только в том случае, если родительский контейнер имеет высоту в пикселях. В вашем случае вам нужно сделать что-то вроде установки .row на 500px и .span3 на 50%. Если родительский объект не имеет установленной высоты, браузер по умолчанию использует только высоту содержимого, если вы зададите ему процент.
8

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

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

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

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

2

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

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

2

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

Первый и самый простой - использовать две таблицы: одну для заголовков и одну для тела. Это работает, но заголовки и столбцы тела не выровнены. И, так как я хотел использовать авторазмер, который поставляется с таблицами начальной загрузки Twitter, я закончил тем, что создал функцию 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;
}

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

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

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

8

CSS

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

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>
Можно ли сохранить относительную высоту? pangi
Относительно чего?
Я хочу, чтобы высота была установлена в процентах. Это возможно? Я не смог заставить его работать. pangi
С помощью этого метода заголовок также можно прокручивать, так есть ли способ исправить заголовок таблицы?
Конечно, просто установите высоту стола на 100%..table-class-name { height: 100%; }.
34

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

Потрясающие! Спасибо @ Put12co22mer2. Я довольно ужасен с css, так что это спасение для меня. Огромное спасибо!
@Frito Не волнуйся, будь счастлив;) Я просто забыл раскладку стола: исправлено; ... Ссылка обновлена
Я был очень взволнован, когда увидел этот пример, но оказалось, что макет «обалдеть» когда данные вtd Элемент различается по размеру.bootply.com/OsvzINuTUA
26

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

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

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

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

столбцы td не выровнены с элементами th, потому что полоса прокрутки сдвигает содержимое
Спасибо, это помогает. К сожалению, я не могу указать ширину th элементов, так как это недопустимый элемент. (???)
Ааа ... Я на Mac, где полосы прокрутки невидимы и отображаются поверх содержимого только при прокрутке. Это будет непросто, поскольку полосы прокрутки зависят от ОС и браузера.
1

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

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

3

pre-scrollable.

4

... Если вы хотите прокрутить только tbody, примените следующее:

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}
Это будет работать только в том случае, если это таблица из одного столбца. Если у вас есть таблица с несколькими столбцами, это приведет к прокрутке только первого столбца.
223

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

Это не работает ... Переполнение не работает с таблицей.
Это на самом деле работает? Я попробовал это, и это не имело никакого эффекта вообще.
Только FYI, установив переполнение на «auto», а не overflow: scroll, не создаст избыточную горизонтальную полосу прокрутки.
Просто чтобы прояснить это для людей .... & lt; div style = & quot; переполнение: авто; & quot; & lt; table class = & quot; table & quot; & gt; .... & lt; / table & gt; & lt; / div & gt ;
@JonathanWood: есть ли способ применитьoverflow только на теле таблицы, но где<thead> части всегда отображаются?

Похожие вопросы