Я знаком с этим вопросом и подтвержденным ответом StackOverflow.
Однако, проверяя их скрипку, я заметил одну вещь, которая мне действительно нужна. Контейнер (aka элемент класса div2) не имеет свойства no-wrap, которое мне действительно действительно нужно для моих таблиц внутри #container (nowrap для того, чтобы иметь таблицы в одной строке)
Мой код:
CSS:
.subnetTable {
width: 150px;
display: inline-table;
border:1px solid #E8E8E9;
margin: 2px;
padding: 2px;
white-space: normal;
}
#scroller_wrapper, #container_wrapper{
width: 98%; border: none 0px RED;
overflow-x: scroll; overflow-y:hidden;
}
#scroller_wrapper{height: 16px; }
#scroller { width: 500px; height: 16px; }
#container { width: 500px; overflow: auto;}
HTML:
<div id="scroller_wrapper">
<div id="scroller">
</div>
</div>
<div id="container_wrapper">
<div id="container">
<table class="subnetTable"><tr><td>12341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 123412341234 1234123412 34123412341 2341234123412 341234123 412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 123412341 2341234123412 34123412341234 123412341 23412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 1234123412 341234123412 34123412341234 123412341 23412341234</td></tr></table>
<table class="subnetTable"><tr><td>12341234 123412341 2341234123412 34123412341234 123412341 23412341234</td></tr></table>
</div>
</div>
JAVASCRIPT (jQuery):
// SCROLLBARS
$(function(){
$("#scroller_wrapper").scroll(function(){
$("#container_wrapper").scrollLeft($("#scroller_wrapper").scrollLeft());
});
$("#container_wrapper").scroll(function(){
$("#scroller_wrapper").scrollLeft($("#container_wrapper").scrollLeft());
});
});
// CONTAINER RESIZE
$(window).load(function () {
$('#scroller').css('width', ($(window).width() - 10) );
$('#container').css('width', ($(window).width() - 10) );
});
Код MY JsFiddle и проблема:
Проблема возникает, когда вы добавляете white-space: nowrap; в класС#container. Вместо правильного результата он создает другую полосу прокрутки внизу, которая мне не понравится. IT перемещает таблицы в одну строку, но не создает правильную полосу прокрутки внизу или сверху (замена таблиц только с текстом тоже не работает).
Пожалуйста, помогите мне!
С вашим кодом as-is решение заключается в том, чтобы поставить <br>
непосредственно перед четвертой таблицей или обернуть первые три и три три таблицы в элементе уровня блока, таком как div.
Каждая таблица является встроенной - поэтому установка #container, которая не будет завершена, приведет к тому, что все встроенные таблицы выйдут вправо. Добавление разрыва заставит его сломаться, как ожидалось.
Пожалуйста, подумайте о том, чтобы использовать DIV или какой-либо другой семантический элемент, а не таблицы - ваш код не является табличным.