html - 使用 divs 而不是 tables 标签在没有 Bootstrap 的情况下进行响应

Question

我正在尝试创建下表:但我需要使用 DIV 而不是表格。我要创建的结构:

我必须在不使用任何表格标签的情况下拥有 3 个全局 Div。我不知道没有表格标签怎么可能做到这一点，这里只有 div 是我试过的 codepen link

.wrapTableTech {
  display: table;
  width: 100%;
  height: 14rem;
  border: 2px solid;
}

.blocTech {
  display: table-header-group;
  background-color: gray;
}

.tech-cell {
  display: table-cell;
  text-align: justify;
  padding: 10px;
  border: 2pxsolid red;
  text-align: center;
}

.blocCat {
  display: table-row-group;
  background-color: gray;
  text-align: center;
}

.tech-row {
  display: table-row;
  border: 2px solid green;
}

<div class="wrapTableTech">
  <div class="blocTech">
    <div class=""></div>
    <div class="tech-cell">Tech 1</div>
    <div class="tech-cell">Tech 2</div>
    <div class="tech-cell">Tech 3</div>
    <div class="tech-cell">Tech 4</div>
  </div>
  <div class="blocCat">
    <div class="tech-row">PTI</div>
    <div class="tech-row">HO</div>
    <div class="tech-row">OP</div>
    <div class="tech-row">AS</div>
  </div>
  <div class="blocValue">
    <div>1</div>
    <div>4</div>
    <div>6 hours</div>
    <div>2</div>
  </div>
</div>

Answer 1

在没有 Bootstrap 的情况下尝试以下 css 和 Html:

.wrapTableTech {
    width: 100%;
    border: 2px solid;
    float: left;
    width: 100%;
}
.blocTech {
    background-color: gray;
    float: left;
    width: 20%;
}
.tech-cell {
  text-align: justify;
  padding: 10px;
  border: 2px solid red;text-align:center;
}
.blocCat {
    background-color: gray;
    text-align: center;
    float: left;
    width: 80%;
}
.tech-row {
    border: 2px solid green;
    float: left;
    width: 24%;
    padding: 10px 0;
}

<div class="wrapTableTech">
  <div class="blocTech">
    <div class="tech-cell">&nbsp;</div>
    <div class="tech-cell">PTI</div>
    <div class="tech-cell">HO</div>
    <div class="tech-cell">OP</div>
    <div class="tech-cell">AS</div>
  </div>
  <div class="blocCat">
    <div class="blocvalue">
      <div class="tech-row">Tech 1</div>
      <div class="tech-row">Tech 2</div>
      <div class="tech-row">Tech 3</div>
      <div class="tech-row">Tech 4</div>
    </div>
    <div class="blocvalue">
      <div class="tech-row">1</div>
      <div class="tech-row">4</div>
      <div class="tech-row">6 Hours</div>
      <div class="tech-row">4</div>
    </div>
    <div class="blocvalue">
      <div class="tech-row">2</div>
      <div class="tech-row">5</div>
      <div class="tech-row">3 Hours</div>
      <div class="tech-row">2</div>
    </div>
    <div class="blocvalue">
      <div class="tech-row">1</div>
      <div class="tech-row">4</div>
      <div class="tech-row">6 Hours</div>
      <div class="tech-row">4</div>
    </div>
    <div class="blocvalue">
      <div class="tech-row">2</div>
      <div class="tech-row">5</div>
      <div class="tech-row">3 Hours</div>
      <div class="tech-row">5</div>
    </div>
    
  </div>
</div>