我如何创建一个 <div> 另一个表 <div> 表格使用相对宽度使用CSS？

Question

我试图在另一个表（“表”）中嵌入一个表（“ anotherTable”）。 单元格的宽度指定为百分比。

“表格”包含3个宽度分别为10％，80％和10％的单元格。

“另一个表格”包含5个单元格，其宽度为20％，20％，20％，20％和20％。

我需要“ anotherTable”中的单元格宽度相对于“ table”的单元格2。 我该如何实现？

当前，“ anotherTable”中的单元格宽度是特定于查看端口的。

这是我的代码： https : //jsfiddle.net/madathil/03u7947p/

<html lang="en">
<head>
  <title>test</title>

  <style> 
    *{margin:0px;padding:0px;}
    .cell { border: 1px solid red; border-style: none solid none none; }
  </style>
</head>

<body>
<div class="table" style="width: 100%;">
    <div class="row" >
        <div class="cell" style="width: 10%; background-color: powderblue; float: left;">&nbsp;</div>
        <div class="cell" style="width: 80%; background-color: pink; float: left;">
            <div class="anotherTable">
                <div class="row">
                    <div class="cell" style="width: 20%; background-color: lightgreen; float: left; border">&nbsp;</div>
                    <div class="cell" style="width: 20%; background-color: lightred; float: left;">&nbsp;</div>
                    <div class="cell" style="width: 20%; background-color: lightyellow; float: left;">&nbsp;</div>
                    <div class="cell" style="width: 20%; background-color: lightblue; float: left;">&nbsp;</div>
                    <div class="cell" style="width: 20%; background-color: orange; float: left;">&nbsp;</div>
                </div>
            </div>
        </div>
        <div class="cell" style="width: 10%; background-color: powderblue; float: left;">&nbsp;</div>
    <div>
</div>

</body>
</html>

Answer 1

 * { margin: 0px; padding: 0px; } .cell { border: 1px solid red; border-style: none solid none none; box-sizing: border-box; } 

 <div class="table" style="width: 100%;"> <div class="row"> <div class="cell" style="width: 10%; background-color: powderblue; float: left;">&nbsp;</div> <div class="cell" style="width: 80%; background-color: pink; float: left;"> <div class="anotherTable"> <div class="row"> <div class="cell" style="width: 20%; background-color: lightgreen; float: left; border">&nbsp;</div> <div class="cell" style="width: 20%; background-color: lightred; float: left;">&nbsp;</div> <div class="cell" style="width: 20%; background-color: lightyellow; float: left;">&nbsp;</div> <div class="cell" style="width: 20%; background-color: lightblue; float: left;">&nbsp;</div> <div class="cell" style="width: 20%; background-color: orange; float: left;">&nbsp;</div> </div> </div> </div> <div class="cell" style="width: 10%; background-color: powderblue; float: left;">&nbsp;</div> <div> </div> 

使用box-sizing: border-box; 这将使边框计入您指定的宽度...否则，您将获得20％+ 1px边框，这又将导致总计超过100％，因此为什么会有一些单元格会沿新行移动。

Answer 2

您已经在.cell定义了border 。 所以您的宽度是： （20％* 5）+ 10px> 100％ 。

因此，您必须使用box-sizing: border-box ：

 * { margin:0px; padding:0px; } .cell { border: 1px solid red; border-style: none solid none none; box-sizing: border-box; } .row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

 <div class="table" style="width: 100%;"> <div class="row" > <div class="cell" style="width: 10%; background-color: powderblue; float: left;">&nbsp;</div> <div class="cell" style="width: 80%; background-color: pink; float: left;"> <div class="anotherTable"> <div class="row"> <div class="cell" style="width: 20%; background-color: lightgreen; float: left; border">&nbsp;</div> <div class="cell" style="width: 20%; background-color: lightred; float: left;">&nbsp;</div> <div class="cell" style="width: 20%; background-color: lightyellow; float: left;">&nbsp;</div> <div class="cell" style="width: 20%; background-color: lightblue; float: left;">&nbsp;</div> <div class="cell" style="width: 20%; background-color: orange; float: left;">&nbsp;</div> </div> </div> </div> <div class="cell" style="width: 10%; background-color: powderblue; float: left;">&nbsp;</div> </div> </div> 

我还补充说clear: both因为您正在使用浮点数。