Question

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

“table”包含3个细胞，宽度分别为10％，80％和10％。

“anotherTable”包含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

您已在border中定义了.cell。所以你的宽度是：（20％* 5）+ 10px＆gt; 100％

所以你必须使用box-sizing: border-box：

＆＃13;
＆＃13;
* { 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; }
＆＃13;
<div class="table" style="width: 100%;"> <div class="row" > <div class="cell" style="width: 10%; background-color: powderblue; float: left;"> </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"> </div> <div class="cell" style="width: 20%; background-color: lightred; float: left;"> </div> <div class="cell" style="width: 20%; background-color: lightyellow; float: left;"> </div> <div class="cell" style="width: 20%; background-color: lightblue; float: left;"> </div> <div class="cell" style="width: 20%; background-color: orange; float: left;"> </div> </div> </div> </div> <div class="cell" style="width: 10%; background-color: powderblue; float: left;"> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

我还添加了clear: both，因为您使用的是浮动广告。

如何使用css使用相对宽度在另一个<div>表中创建<div>表？

2 个答案: