Горизонтальная прокрутка при переполнении стола

У меня есть базовая таблица в контейнере. В таблице будет около 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/

Ответы

Ответ 1

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

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

Fiddle: http://jsfiddle.net/5WsEt/

Ответ 2

Если я серьезно не понял ваш вопрос, переместите overflow-x:scroll из .search-table в .search-table-outter.

http://jsfiddle.net/ZXnqM/4/

.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto;   }

Насколько я знаю, вы не можете давать полосы прокрутки самим таблицам.

Ответ 3

   .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.

Ответ 4

Решение, о котором никто не упомянул, - это использовать white-space: nowrap для таблицы и добавить overflow-x к оболочке.

(http://jsfiddle.net/xc7jLuyx/11/)

CSS

.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }

HTML

<div class="wrapper">
    <table></table>
</div>

Это идеальный сценарий, если вы не хотите строки с несколькими строками. Чтобы добавить строки, вам нужно использовать <br/>.

Ответ 5

На мобильном сайте для мобильных телефонов все это должно быть абсолютным на относительном div. И фиксированная высота. Media Query для релевантности.

@media only screen and (max-width: 480px){
  .scroll-wrapper{
    position:absolute;
    overflow-x:scroll;
  }