Create Table without table tag

 Create Table without table tag :

CSS:

.table {

  display: table;

}

.table-row {

  display: table-row;

}

.table-cell {

  display: table-cell;

  padding: 10px;

  border: 1px solid black;

}

.table-row:nth-child(even) {

  background: lightblue;

}

HTML:

<div class="table">

  <div class="table-row">

    <div class="table-cell">

      First item

    </div>

    <div class="table-cell">

      Second item

    </div>

    <div class="table-cell">

      Third item

    </div>

    <div class="table-cell">

      Fourth item

    </div>

    <div class="table-cell">

      Fifth item

    </div>

  </div>

  <div class="table-row">

    <div class="table-cell">

      First item

    </div>

    <div class="table-cell">

      Second item

    </div>

    <div class="table-cell">

      Third item

    </div>

    <div class="table-cell">

      Fourth item

    </div>

    <div class="table-cell">

      Fifth item

    </div>

  </div>

  <div class="table-row">

    <div class="table-cell">

      First item

    </div>

    <div class="table-cell">

      Second item

    </div>

    <div class="table-cell">

      Third item

    </div>

    <div class="table-cell">

      Fourth item

    </div>

    <div class="table-cell">

      Fifth item

    </div>

  </div>

</div>



Comments