Search code examples
htmlcsscss-tablestabular

Using divs instead of tables tag to be responsive without bootstrap

I'm trying to create the following table: but I need to use DIVs instead of tables. Structure I want to create:

enter image description here

I have to have 3 global Divs without using any table tag. I don't see how is it possible to do it without table tags, only divs here is what I tried 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>

Solution

  • Try to understand that a div is a container. Therefore, the structure must be hierarchical in order to solve this problem, but not separated into 3 different individual divs (=containers).

    Try something like:

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