Я хотел бы иметь таблицу на моем веб-сайте. Проблема в том, что эта таблица будет содержать около 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 »</a></p>
</div>
Я попытался применить максимальную высоту и фиксированную высоту к таблице, но она не работает.
Элементы таблицы, похоже, не поддерживают это напрямую. Поместите таблицу в div и установите высоту div и установите overflow: auto
.
.span3 {
height: 100px !important;
overflow: scroll;
}
Вы захотите обернуть его в свой собственный div или дать этому span3 свой собственный идентификатор, чтобы вы не влияли на весь ваш макет.
Здесь сценарий: http://jsfiddle.net/zm6rf/
.span3
повлияет на все элементы span3
всем вашем сайте, управляемом Bootstrap.
Не нужно обертывать его в 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
td
различаются по размеру. bootply.com/OsvzINuTUA
У меня была такая же проблема, и я использовал комбинацию вышеупомянутых решений (и добавил собственный поворот). Обратите внимание, что мне нужно было указать ширину столбцов, чтобы они были согласованы между заголовком и телом.
В моем решении верхний и нижний колонтитулы остаются фиксированными, пока тело прокручивается.
<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; }
Я надеюсь, что это поможет кому-то другому.
Недавно мне пришлось сделать это с помощью бутстрапа и 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>
Это не может быть решением для большого количества строк. Я просто использую трюк таблицы дублирования, чтобы сделать это для таблицы подсчета маленьких строк, в то время как он может поддерживать ширину столбца 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>
Все вышеперечисленные решения также делают прокрутку заголовка таблицы... Если вы хотите прокрутить текст только тогда, примените это:
tbody {
height: 100px !important;
overflow: scroll;
display:block;
}
Ни один из этих ответов не работал удовлетворительно для меня. Они либо не фиксировали строку заголовка таблицы на месте, либо требовали, чтобы фиксированные ширины столбцов работали, и даже тогда имели тенденцию смещать строки строк и строк заголовка в разных браузерах.
Я рекомендую кусать пулю и использовать правильное управление сеткой, например jsGrid или мой личный фаворит SlickGrid. Очевидно, он вводит зависимость, но если вы хотите, чтобы ваши таблицы работали как реальные сетки с поддержкой кросс-браузера, это избавит вас от вытаскивания волос. Он также дает вам возможность сортировки и изменения размеров столбцов плюс множество других функций, если вы хотите их.
Недавно у меня была аналогичная проблема, и я решил ее исправить, используя смесь разных решений.
Первым и самым простым было использование двух таблиц: одного для заголовков и одного для тела. Это работает, но заголовки и столбцы тела не выровнены. И, поскольку я хотел использовать автоматический размер, который поставляется с твитер-бутстрап-таблицами, я создал 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.
Это не очень, но это работает. Надеюсь, это поможет кому-то.
Предложение Джонатана Вуда. У меня нет возможности обертывания таблиц с помощью нового div, поскольку я использую CMS. Используя JQuery здесь, что я сделал:
$( "table" ).wrap( "<div class='table-overflow'></div>" );
Это обертывает элементы таблицы новым div с классом "переполнение таблицы".
Затем вы можете просто добавить следующее определение в свой файл css:
.table-overflow { overflow: auto; }
Это можно сделать, разместив тело таблицы в 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/