Горизонтальная прокрутка при переполнении таблицы
у меня есть базовая таблица в контейнере. Таблица будет иметь около 25 столбцов. Я пытаюсь добавить горизонтальную полосу прокрутки при переполнении таблицы и испытываю очень трудное время.
то, что происходит сейчас, - это ячейки таблицы, вмещающие содержимое ячеек, автоматически регулируя высоту ячейки и поддерживая фиксированную ширину таблицы.
Я признателен за любые предложения о том, почему мой метод не работает, как это исправить.
много заранее спасибо!
в CSS
.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto; overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even) {background: #f5f5f5;}
tr:nth-child(odd) {background: #FFF;}
HTML-код
<div class="search-table-outter wrapper">
<table class="search-table inner">
<tr>
<th>Col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col5</th>
</tr>
<?php echo $rows; ?>
</table>
</div>
JS fiddle (Примечание: если возможно, я хотел бы, чтобы горизонтальная полоса прокрутки была в контейнере с красной границей): http://jsfiddle.net/ZXnqM/3/
4 ответов
Я думаю, что ваше переполнение должно быть на внешнем контейнере. Можно также явно задать минимальную ширину столбцов. Вот так:
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }
Скрипка:http://jsfiddle.net/5WsEt/
если я не неправильно понял ваш вопрос, двигайтесь overflow-x:scroll
С .search-table
to .search-table-outter
.
.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto; }
насколько я знаю, вы не можете дать полосы прокрутки для самих таблиц.
.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
вы должны предоставить прокрутки в div.
на отзывчивом сайте для мобильных телефонов все это должно быть расположено абсолютным на относительном div. И фиксированная высота. Медиа-запрос установить вручную.
@media only screen and (max-width: 480px){
.scroll-wrapper{
position:absolute;
overflow-x:scroll;
}