嵌套 div 的 CSS 样式

Question

我想使用 div 制作表格。我以这种方式嵌套 div：

<div class='table'>
        <div class='row'>
                <div class='cell'>
                </div>
                ...
                ...
        </div>
</div>

我更改了每个 div 的宽度，但并非所有内容都按预期更改。

改变表格 div 的宽度效果很好。

表格宽度设置为 70%：

表格宽度设置为 80%：

改变行 div 的宽度没有任何作用。

行宽设置为 70%：

行宽设置为 100%：

改变单元格 div 的宽度完全出乎意料。

单元格宽度设置为 30%：

单元格宽度设置为 20%：

单元格宽度设置为 7%：

我尝试包括位置：相对，没有改变任何东西。

相关css代码为：

.table{


}

.heading{
    display: table-row;

}

.row{
    display: table-row;

}

.cell{

    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;

}

我通过 Firefox 的开发工具更改每个类的宽度。

你能帮我理解底层逻辑吗？

Answer 1

你的表类需要 css 的：

display:table;

其他信息：

表格宽度：更改表格宽度将使整个表格成为您指定的任何大小，除非其中的内容大于您设置的内容。单元格将自动调整大小以适应宽度。

行宽：什么都不做。您不应该为行设置宽度，因为它们总是占据表格宽度的 100%。

单元格宽度：这些需要始终加起来为 100% 才能以可预测的方式工作。例如，如果每行有四个单元格，则可以将它们设置为 25% 的宽度。将它们全部设置为 15% 宽度是没有意义的，因为 15*4=60... 剩下 40% 下落不明。

但是，您可以将单个单元格的宽度设置为 15%，然后不要为其余单元格设置任何宽度。此时，您设置的将始终为 15%，其余的将仅占用剩余空间。像这样：http://jsfiddle.net/4g2Lavmy/4/

Answer 2

将类名“cell”添加到 div.table 内的所有 div 中，并像这样使用 CSS：

div.cell{width:30%;}