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

【问题标题】：How do I create a <div> table within another <div> table using relative width using css?如何使用 css 使用相对宽度在另一个 <div> 表中创建 <div> 表？
【发布时间】：2017-09-11 21:42:16
【问题描述】：

我正在尝试在另一个表（“表”）中嵌入一个表（“anotherTable”）。单元格的宽度以百分比形式指定。

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

【问题讨论】：

没有表格...只有 div 和浮动 div。如果您真的想要一个表现得像表格的表格，您应该使用正确的显示/标签。
你为什么说宽度是视口特定的？它发生的唯一原因是因为你的边界。
@Salketer 我现在看到了，谢谢

标签： html css

【解决方案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%，因此为什么您会得到一些换行的细胞。

【讨论】：

【解决方案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，因为您使用的是浮点数。

【讨论】：