嵌套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的Dev工具更改每个类的宽度。

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

Answer 1

您的表类需要css：

display:table;

其他信息：

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

行宽：什么都不做。您不应该在行上设置宽度，因为它们总是占用表宽度的100％。

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

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

Answer 2

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

div.cell{width:30%;}