More appropriate CSS/HTML demo

Question

我有这张桌子：

<div class="info" id="item">
<div id="item_container">
    <div id="item" style="color: rgb(255,255,255); color: rgba(255,255,255,255); margin: 0 auto; width: auto; display:table; padding:3px; background: rgb(0,0,0); background: rgba(0,0,0,255);">
        <div id="table_row" style="display:table-row; width: auto;">
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
            <div id="cell" style="font-size:7px; padding: 0px 2px; display:table-column; width:auto; float:left;">40</div>
        </div>
    </div>
</div>

完整的表格在下面的小提琴上，并解释了一些更好的东西。 http://jsfiddle.net/k2mqB/12/

部分内容是动态创建的，这就是您看到内联样式的原因。

现在我知道人们可能会挂起的第一件事就是为什么我使用div来创建一个表。好吧我遇到的问题是我需要一个表但我不希望列排成一行所以所有行的第2列都在同一个地方。

例如，见下文和小提琴，即使单元格宽度在行与行之间不同，请注意它仍然是像桌子一样的矩形形状，因为它扩展到最远的值（欢呼）并且不会结束看起来像几排乐高。我无法找到一种方法来做一个表或一个div，但两者结合我可以。它可能不是真的，可能有一种方法比这更好，但我找不到它。这种表格风格的div组合对我来说效果很好。

|--------|---------|----------|
| test   | happy days yep|----|
| another| test | is this|one   |
|this is the final|countdown|cheer|
|--------|---------|----------|---|

它可能不是完美的解决方案，但CSS不是我的强项。我发现我总是不断添加东西来控制它，我发现我有很多东西它们互相干扰，我不知道要删除哪些以及添加哪些东西。

因此，如果你看着我的小提琴，你会注意到垂直卷轴正在工作。但是请注意，我在每一行上都有12个单元，但是在6个可能是宽度的原因之后它会包裹起来。我需要保留外柱的宽度，所以我想做的就是让它做水平滚动。

原因是我的网站上有一个3列布局，这个容器是3个中的一个，如果它扩展了高度或宽度，那么它会使列不按顺序移动，因为一个更高或太宽。

这是CSS，但这也是小提琴：

#item{
overflow:auto;
width:220px;
height:170px;
margin: 0 auto;
max-width: 92%;
background-color: #E6E4E4;
}

.info{
    padding:0px;
}

div{
    display: block;   
}

#item-container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 220px;
    max-width: 220px;
    height: 170px;
    max-height: 170px;
    margin: 0px;
    padding: 0px;
}

#table-row{
    margin: 0px;
    padding: 0px;    
}

所以很多数据但我的问题很简单，我需要水平滚动，以便保持外部容器的尺寸。

Answer 1

首先，ID是唯一的，它们不能在页面上多次使用。改为使用类。

其次，当您使用float时，您会从文档流程中取出一些内容。要使父级水平溢出，您需要删除它。然后，不要将您的单元格设置为display: table-column，而是使用display: table-cell。应该这样做。

<div class="table_row" style="display:table-row; width: auto;">
  <div class="cell" style="font-size:7px; padding: 0px 2px; display:table-cell; width:auto;">40</div>
  ...
</div>

<强> Demo

Answer 2

我非常喜欢使用表来显示表格数据。

在你的CSS中你有一个宽度：这里定义了100px;

#item{
overflow:auto;
width:100px;
height:100px;
margin: 0 auto;
max-width: 92%;
background-color: #E6E4E4;
}

你还有一个内联样式宽度：auto;这不会改变任何事情。

将您的宽度增加到大约200px，您将看到所有12个div都适合一行。

干杯，

的Darren

Answer 3

您不能多次在网页上使用ID。这是一个只指向一个元素的ID。

请改用class。例如：

<div class="info" id="item">
    <div id="item_container">
        <div id="item" ... >
...
             <div id="cell" ... >
             <div id="cell" ... >

在上文中，只会使用您的CSS更改第一个#item和第一个#cell。

More appropriate CSS/HTML demo

此演示显示相同的页面，但HTML和CSS使用类而不是ID。

Answer 4

首先，您应该更改CSS规则：

#item {
    overflow: scroll;
    /* ... */
}

然后，您应该将HTML代码更改为：

<div class="info" id="item">
  <div id="item_container">
    <div id="item" style="color: rgb(255,255,255); color: rgba(255,255,255,255); margin: 0 auto; width: auto; display:table; padding:3px; background: rgb(0,0,0); background: rgba(0,0,0,255);">
      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>


      <div id="table_row" style="white-space:nowrap; width: auto;">
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
        <div id="cell" style="font-size:7px; padding: 0px 2px; display:inline-block;">40</div>
      </div>
    </div>
  </div>
</div>

我认为这样你就可以实现你想要达到的目标。

CSS内容是包装而不是扩展div

4 个答案:

More appropriate CSS/HTML demo