在没有 bootstrap 的情况下使用 div 而不是 tables 标签来响应

Question

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

我必须在不使用任何 table 标签的情况下拥有 3 个全局 Div。我看不出没有 table 标签怎么可能，这里只有 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

.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: 2px solid 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=" row wrapTableTech">
      <div class="blocTech">
        <div class="col-sm-4"></div>
        <div class="col-sm-2 tech-cell">Tech 1</div>
        <div class="col-sm-2 tech-cell">Tech 2</div>
        <div class="col-sm-2 tech-cell">Tech 3</div>
        <div class="col-sm-2 tech-cell">Tech 4</div>
      </div>
      <div class="blocCat">
        <div class="col-sm-2 blocValue tech-cell">PTI</div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
      </div>
     <div class="blocCat">
        <div class="col-sm-2 blocValue tech-cell">HO</div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
            <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
      </div>
       <div class="blocCat">
        <div class="col-sm-2 blocValue tech-cell">OP</div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
      </div>
       <div class="blocCat">
        <div class="col-sm-2 blocValue tech-cell">AS</div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
        <div class="col-sm-2 blocValue tech-cell"><input type="text"></div>
      </div>
    </div>

Answer 2

尝试下面的 css 和 Html 没有 bootstrap:

.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>

Answer 3

试着理解div是一个容器。因此，为了解决这个问题，结构必须是分层的，而不是分成3个不同的individual divs(=containers).

试试这样的东西：

  .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: 2px solid red;
    text-align:center;
  }
  .blocCat {
    display: table-row-group;
    background-color: gray;text-align: center;

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

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

  .tech-value {
    display: table-cell;
    text-align: justify;
    padding: 10px;
    border: 1px solid red;
    text-align:center;
    background-color: white;
  }

<div class="wrapTableTech">
  <div class="blocTech">
    <div class="tech-cell"></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"> 
      <div class="tech-RowTitle">PTI</div>
      <div class="tech-value">1.1</div>
      <div class="tech-value">1.2</div>
      <div class="tech-value">1.3</div>
      <div class="tech-value">1.4</div>
    </div>
    <div class="tech-row">
       <div class="tech-RowTitle">HO</div>
       <div class="tech-value">2.1</div>
       <div class="tech-value">2.2</div>
       <div class="tech-value">2.3</div>
       <div class="tech-value">2.4</div>
    </div>
    <div class="tech-row">
       <div class="tech-RowTitle">OP</div>
       <div class="tech-value">3.1</div>
       <div class="tech-value">3.2</div>
       <div class="tech-value">3.3</div>
       <div class="tech-value">3.4</div>
    </div>
    <div class="tech-row">
       <div class="tech-RowTitle">AS</div>
       <div class="tech-value">4.1</div>
       <div class="tech-value">4.2</div>
       <div class="tech-value">4.3</div>
       <div class="tech-value">4.4</div>
    </div>
  </div>
</div>

在没有 bootstrap 的情况下使用 div 而不是 tables 标签来响应

Using divs instead of tables tag to be responsive without bootstrap

html

css

css-tables

tabular