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

0

Я знаком с этим вопросом и подтвержденным ответом 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 перемещает таблицы в одну строку, но не создает правильную полосу прокрутки внизу или сверху (замена таблиц только с текстом тоже не работает).

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

  • 0
    1) Почему вы используете таблицы? DIV или даже неупорядоченный список могут быть более семантическими.
Теги:
nowrap

1 ответ

1
Лучший ответ

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

Зачем?

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

Заметка

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню