个人中心
gpt4 book ai didi

javascript - 显示表格内容时出现问题

转载 作者：行者123 更新时间：2023-11-27 23:24:30 25 4
gpt4 key购买 nike

我正在使用 CSS 处理 HTML，但我对 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>

最佳答案

您的帖子没有过多提及所需的输出，但提到了 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>

关于javascript - 显示表格内容时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57851747/

25 4 0
文章推荐： c++ - 在 xml 中存储 C++ 二进制输出
文章推荐： javascript - 如何解决Google map 上多个标记上的信息框标签重叠问题
文章推荐： c# - 将二维数组 double[][] 传递给 c# windows 应用程序
文章推荐： javascript - 将 React 模板放入一个全局变量的属性中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com