DIV 和 nowrap 容器顶部的滚动条答案

【问题标题】：Scrollbar on top of DIV and nowrap containerDIV 和 nowrap 容器顶部的滚动条
【发布时间】：2014-02-18 11:36:18
【问题描述】：

我熟悉this StackOverflow 问题和确认答案。

但是，查看他们的fiddle here，我注意到我真正需要的一件事。容器（又名 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) );
});

我的 JsFiddle 代码和问题：

click here.

问题出现了，当你添加 white-space: nowrap;到#container 类。它不是正确的结果，而是在底部创建了另一个我不喜欢的滚动条。 IT 确实将表格移动到一行，但它不再在底部或顶部创建正确的滚动条（仅用文本替换表格也不起作用）。

请帮帮我！

【问题讨论】：

1) 为什么要使用表格？ DIV 甚至无序列表可能更具语义性。

标签： javascript jquery html css nowrap

【解决方案1】：

按原样编写代码，解决方案是将<br> 放在第四个表之前，或者将前三个和后三个表包装在块级元素中，例如 div。

为什么？

每个表都是内联的 - 因此将#container 设置为不换行将使所有内联表向右延伸。添加中断将强制它按预期中断。

注意

请考虑使用 DIV 或其他语义元素而不是表格 - 您的代码似乎不是表格数据。

【讨论】：