0

我熟悉这个StackOverflow 问题和已确认的答案。

但是，在这里查看他们的小提琴，我注意到我真正需要的一件事。容器（又名 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 代码和问题：

点击这里。

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

请帮帮我！

4

1 回答 1

1

使用您的代码，解决方案是将 a 放在<br>第四个表之前，或者将前三个和后三个表包装在块级元素中，例如 div。

为什么？

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

笔记

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

于 2014-02-18T16:24:29.180 回答