Полоса прокрутки в верхней части DIV и nowrap контейнера

Question

Я знаком с этим вопросом Stackru и подтвержденным ответом.

Однако, проверяя их скрипку здесь, я заметил одну вещь, которая мне действительно очень нужна. Контейнер (он же элемент класса div2) не имеет свойства no-wrap, которое мне действительно нужно для моих таблиц внутри #container (теперь для того, чтобы таблицы были в одной строке)

Мой код:

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) );
});

Мой код JsFiddle и проблема:

нажмите здесь

Проблема появляется, когда вы добавляете пробел: nowrap; в #контейнерный класс. Вместо правильного результата, он создает другую полосу прокрутки внизу, которая мне не понравилась бы. Он перемещает таблицы в одну строку, но больше не создает правильную полосу прокрутки внизу или вверху (замена таблиц только текстом тоже не работает).

Пожалуйста, помогите мне!

Answer 1

С вашим кодом, как-это решение, чтобы поставить <br> непосредственно перед четвертой таблицей или упаковкой первых трех и вторых трех таблиц в элемент уровня блока, такой как div.

Зачем?

Каждая таблица является встроенной, поэтому если не задавать обертку для #container, все встроенные таблицы будут расширяться вправо. Добавление разрыва заставит это сломаться как ожидалось.

Заметка

Пожалуйста, рассмотрите возможность использования DIV или другого семантического элемента, а не таблиц - ваш код не является табличными данными.