Добавить горизонтальную полосу прокрутки в таблицу html
есть ли способ добавить горизонтальную полосу прокрутки в таблицу HTML? Мне действительно нужно, чтобы он был прокручиваемым как по вертикали, так и по горизонтали в зависимости от того, как растет таблица, но я не могу получить ни одну полосу прокрутки.
9 ответов
вы пробовали CSS overflow
собственность?
overflow: scroll; /* Scrollbar are always visible */
overflow: auto; /* Scrollbar is displayed as it's needed */
обновление
Как отмечают другие пользователи,этого мало для добавления полос прокрутки.
Поэтому, пожалуйста, смотрите и upvote комментарии и ответы ниже.
во-первых, сделать display: block
таблицы
и overflow-x:
to auto
.
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
хороший и чистый. Нет лишнего форматирования.
здесь дополнительные примеры с прокруткой заголовков таблиц страница на моем сайте.
оберните таблицу в DIV, установите со следующим стилем:
div.wrapper {
width: 500px;
height: 500px;
overflow: auto;
}
используйте атрибут CSS "переполнения" для этого.
краткий итог:
overflow: visible|hidden|scroll|auto|initial|inherit;
например
table {
display: block;
overflow: scroll;
}
я столкнулся с той же проблемой. Я обнаружил следующее решение, которое было протестировано только в Chrome v31:
table {
table-layout: fixed;
}
tbody {
display: block;
overflow: scroll;
}
Я не мог получить любой из вышеуказанных решений. Тем не менее, я нашел Хак:
body {
background-color: #ccc;
}
.container {
width: 300px;
background-color: white;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
display: table;
table-layout: fixed;
width: 100%;
}
.hack2 {
display: table-cell;
overflow-x: auto;
width: 100%;
}
<div class="container">
<div class="hack1">
<div class="hack2">
<table>
<tr>
<td>table or other arbitrary content</td>
<td>that will cause your page to stretch</td>
</tr>
<tr>
<td>uncontrollably</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
</table>
</div>
</div>
</div>
Я понял, этот ответ, основанный на предыдущее решение и комментарий и добавил некоторые собственные настройки. Это работает для меня на отзывчивом столе.
table {
display: inline-block;
overflow-x: auto;
white-space: nowrap;
// make fixed table width effected by overflow-x
max-width: 100%;
// hide all borders that make rows not filled with the table width
border: 0;
}
// add missing borders
table td {
border: 1px solid;
}
это улучшение Серега Stroobandt это ответ и прекрасно работает. Это решает проблему таблицы, не заполняющей всю ширину страницы, если она имеет меньше столбцов.
<style>
.table_wrapper{
display: block;
overflow-x: auto;
white-space: nowrap;
}
</style>
<div class="table_wrapper">
<table>
...
</table>
</div>
//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>
//Css to make Horizontal Dropdown
<style>
.search-table{table-layout: auto; margin:40px auto 0px auto; }
.search-table, td, th {
border-collapse: collapse;
}
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }
</style>