JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<table cellspacing="0" cellpadding="0" border="0">
  <thead>
    <tr>
      <th>Coluna 1</th>
      <th>Coluna 2</th>
      <th>Coluna 3</th>
      <th class="empty"></th>
      <th>Coluna 4</th>
      <th>Coluna 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Conteúdo 1</td>
      <td>Conteúdo 2</td>
      <td>Conteúdo 3</td>
      <td class="empty"></td>
      <td>Conteúdo 4</td>
      <td>Conteúdo 5</td>
    </tr>
    <tr>
      <td>Conteúdo 1</td>
      <td>Conteúdo 2</td>
      <td>Conteúdo 3</td>
      <td class="empty"></td>
      <td>Conteúdo 4</td>
      <td>Conteúdo 5</td>
    </tr>
  </tbody>
</table>

CSS

table tr th,
table tr td{
  padding: 12px;
  white-space: nowrap;
}
table tr th:nth-child(1),
table tr th:nth-child(2),
table tr th:nth-child(3),
table tr td:nth-child(1),
table tr td:nth-child(2),
table tr td:nth-child(3){
  width: calc((50% / 3) - (10% / 3));
  /* 3 = número de colunas antes do espaço */
  /* 10% = tamanho do espaço */
}

table tr th:nth-child(5),
table tr th:nth-child(6),
table tr td:nth-child(5),
table tr td:nth-child(6){
  width: calc((50% / 2) - (10% / 2));
  /* 2 = número de colunas depois do espaço */
  /* 10% = tamanho do espaço */
}

table tr:nth-child(odd) td{
  background: rgba(0,0,0,0.2);
}

table tr th.empty,
table tr td.empty{
  width: 10%;
  padding: 0;
  background-color: transparent;
}