嵌套 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%:

我尝试包括 position: relative，但没有改变任何东西。

相关的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/