显示表格内容时出现问题答案

【问题标题】：Having issue in showing the contents of table显示表格内容时出现问题
【发布时间】：2019-09-09 19:43:27
【问题描述】：

我在HTML 和CSS 工作，我对CSS 不太熟悉。我面临的问题是单元格（9 和 10）和单元格（11 和 12）之间的宽度被省略了。我已将HTML 代码与CSS 附加在一起。

My desired output is as shown. Color doesn't matters

如果我将padding-left 的值设置为等于width 的值，则可以保持单元格之间的空间。但我不想使用它，因为在其他单元格中它在不设置 padding-left 值的情况下保持不变。

.Csstestbodybg {
  background-color: #fff;
}

div.div3 {
  z-index: 0;
  overflow: auto;
  position: relative;
  width: 70.75%;
  margin-left: auto;
  margin-right: auto;
}

.f1 {
  font-family: Arial;
  font-size: 0.8333em;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-decoration: none;
  line-height: 100%;
}

.c1 {
  color: #000000;
}

div.Csstestflex-container1 {
  width: 100%;
  display: -webkit-flex;
  display: flex;
}

div.Scenario12_Table1_div5 {
  background-color: green;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 16.67%;
  display: block;
  float: left;
  clear: left;
  border: 0px;
  width: 16.67%;
}

div.Scenario12_Table1_div6 {
  background-color: yellow;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 0.00%;
  display: block;
  float: left;
  clear: right;
  border: 0px;
  width: 16.67%;
}

div.Scenario12_Table2_div7 {
  background-color: green;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 100.00%;
  display: block;
  float: left;
  clear: left;
  width: 50.00%;
}

div.Scenario12_Table2_div8 {
  background-color: yellow;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 0.00%;
  display: block;
  float: left;
  clear: right;
  width: 50.00%;
}

div.Scenario12_Table2_div9 {
  background-color: green;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 100.00%;
  display: block;
  float: left;
  clear: left;
  width: 50.00%;
}

div.Scenario12_Table2_div10 {
  background-color: yellow;
  margin-top: 0.00%;
  margin-bottom: 0.00%;
  margin-left: 0.00%;
  display: block;
  float: left;
  clear: right;
  width: 50.00%;
}

<body class="cssbody cssbodybg">
  <div class="Page24852 Csstestdiv div3" name="Section">
    <div>Table Style:<br>&#160;</br>
    </div>
    <div class="Csstestflex-container1">
      <div class="Scenario12_Table1_div5">7</div>
      <div class="Scenario12_Table1_div6">8
        <div class="Csstestflex-container1">
          <div class="Scenario12_Table2_div7">9</div>
          <div class="Scenario12_Table2_div8">10</div>
        </div>
        <div class="Csstestflex-container1">
          <div class="Scenario12_Table2_div9">11</div>
          <div class="Scenario12_Table2_div10">12</div>
        </div>
      </div>
    </div>
</body>

【问题讨论】：

想要的输出是什么？
由于我的 HTML 和 CSS 是使用我的 C++ 应用程序生成的，因此 CSS 中使用的格式和标签将与上述相同。如果我需要更新或添加任何新标签，我可以这样做，但格式相同。
我的意思是所有的盒子看起来应该如何，你可以用图片更新你的帖子。它们应该看起来像下面的答案吗？我理解不要更改 html 但它们的外观如何？？

标签： javascript html css html-table

【解决方案1】：

您的帖子没有过多提及所需的输出，但提到了 flex。使用 flex 的解决方案

.flex {
  display: flex;
  justify-content: space-around;
  flex: 1 1 auto;
  text-align: center;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

<body>
  <div name="Section">
    <div>Table Style:<br>&#160;</br>
    </div>
    <div class="flex flex-row">
      <div class="flex green">7</div>
      <div class="flex flex-col yellow">8</div>
      <div class="flex flex-row">
        <div class="flex flex-col green">
          <div class="flex">9</div>
          <div class="flex">11</div>
        </div>
        <div class="flex flex-col yellow">
          <div class="flex">10</div>
          <div class="flex">12</div>
        </div>
      </div>
    </div>
</body>

【讨论】：