Question

我想创建一个像div结构的表，它放在一个容器中，可以水平滚动并且不会被破坏。我编写了结构，但是当内容比容器长时，它将其余内容放在一个新行中。

到目前为止，这是我的代码： http://jsfiddle.net/rcdzdyv7/2/

其中所有这些元素代表＆＃34;表＆＃34;行：

<div class="header">...</div>
<div class="body">...</div>
<div class="footer">...</div>

我的目标是让这些行是一行的，看起来像是一张桌子。我怎么能解决这个问题？

Answer 1

您可以使用：

.row-content {
   width: 150px;
   display: inline-block;
}

而不是：

.row-content {
   width: 150px;
   float: left;
}

让我知道它是否有效！

Answer 2

你不能使用float:left，因为当内容达到宽度时，无法避免浮动元素“跳转”到下一行（不改变html结构）。

但是，您可以display:inline-block使用这种方式来改变他们使用属性white-space:nowrap的行为。

基本上：

    .container {
        width: 500px;
        overflow-x: scroll;
    }
    .header {
        width: auto;
        display:inline-block;
        background-color: #D9D9D9;
        white-space: nowrap;
        clear: both;
    }
    .body {
        display:inline-block;
        margin: 5px 0;
    }

    .body-row {
        background-color: #E5EBFF;
        display:inline-block;
        clear: both;
        white-space: nowrap;
    }
    .footer {
        clear: both;
        background-color: #D9D9D9;
        white-space: nowrap;
    }
    .row-title {
        width: 300px;
        display:inline-block;
    }
    .row-content {
        width: 150px;
        display:inline-block;
    }
    .value {            
        width: 100%;
    }

，如 FIDDLE

Answer 3

这是因为您正在使用带有分隔宽度而没有设置高度的DIV。因此，当所需的宽度对于容器宽度来说太高时，它将自动进行。希望这是有道理的。一个解决方案可以是使用内联块，个人我会建议使用经典表但只是我的意见

Answer 4

将这些css属性尝试到您想要滚动的<div>

div {
  overflow-x: scroll;
  overflow-y: hidden;
}

希望这就是你想要的！

像div结构的水平可滚动表

4 个答案: