嵌套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%;}