Scrollbar on top of DIV and nowrap container

Question

I'm familiar with this StackOverflow question & confirmed answer.

However, checking their fiddle here, I've noticed one thing I really really need. The container (aka div2 class element) doesn't have no-wrap property which I would really really need for my tables inside #container (nowrap for having tables in one row)

My code:

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 Code & the Problem:

click here.

The problem appears, when you add white-space: nowrap; to #container class. Instead of correct result, it creates another scrollbar at bottom which I wouldn't like. IT does move tables to one row but it doesn't create correct scrollbar at bottom or top anymore (replacing tables with only text doesn't work either).

Please help me out!

1) Why are you using tables? DIVs or even an unordered list may be more semantic. — Ruskin, Feb 18 '14 at 16:22

score 1 · Accepted Answer · answered Feb 18 '14 at 16:24

With you code as-is the solution is to put a <br> just before the fourth table or wrapping the first three and second three tables in a block level element such as a div.

Why?

Each table is inline - so setting #container to not wrap will make all the inline tables extend out to the right. Adding a break will force it to break as expected.

Note

Please consider using DIVs or some other semantic element rather than tables - your code does not appear to be tabular data.

Scrollbar on top of DIV and nowrap container

1 Answers1

Why?

Note