JSFiddle - React, Tailwind, and code Playground

Manual Table layout with styling

by nilloc

HTML

<div layout-content="table">
  <div layout-content="table-head">
    <div layout-content="table-row">
      <div layout-content="table-cell" style="width:100px;">name</div>
      <div layout-content="table-cell">age</div>
    </div>
  </div>
  <div layout-content="table-body">
    <div layout-content="table-row">
      <div layout-content="table-cell">collin</div>
      <div layout-content="table-cell">38</div>
    </div>
    <div layout-content="table-row">
      <div layout-content="table-cell">nick</div>
      <div layout-content="table-cell">40</div>
    </div>
  </div>
</div>

CSS

[layout-content="table"]{
  display:table;
  width:300px;
}
[layout-content="table-head"]{
  display:table-header-group;
}
[layout-content="table-body"]{
  display:table-row-group;
}

[layout-content="table"] [layout-content="table-row"]:nth-child(even){
  background-color:#ddd;
}

[layout-content="table-row"]{
  display:table-row;
}
[layout-content="table-cell"]{
  display:table-cell;
}