CSS {tabela}

Cria tabela responsiva, com cantos arredondados e scroll horizontal caso exceda largura da página.

1. Como utilizar

<div class="table-responsive">
  <table class="table-clean" role="table" aria-label="TÍTULO_DA_TABELA">
    <thead>
      <tr>
        <th>CABEÇALHO_1</th>
        <th>CABEÇALHO_2</th>
        <th>CABEÇALHO_3</th>
        <th>CABEÇALHO_4</th>
        <th>CABEÇALHO_5</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td data-label="CABEÇALHO_1">TEXTO_1a</td>
        <td data-label="CABEÇALHO_2">TEXTO_1b</td>
        <td data-label="CABEÇALHO_3">TEXTO_1c</td>
        <td data-label="CABEÇALHO_4">TEXTO_1d</td>
        <td data-label="CABEÇALHO_5">TEXTO_1e</td>
      </tr>

      <tr>
        <td data-label="CABEÇALHO_1">TEXTO_2a</td>
        <td data-label="CABEÇALHO_2">TEXTO_2b</td>
        <td data-label="CABEÇALHO_3">TEXTO_2c</td>
        <td data-label="CABEÇALHO_4">TEXTO_2d</td>
        <td data-label="CABEÇALHO_5">TEXTO_2e</td>
      </tr>
    </tbody>
  </table>
</div>

2. Resultado

CABEÇALHO_1	CABEÇALHO_2	CABEÇALHO_3	CABEÇALHO_4	CABEÇALHO_5
TEXTO_1a	TEXTO_1b	TEXTO_1c	TEXTO_1d	TEXTO_1e
TEXTO_2a	TEXTO_2b	TEXTO_2c	TEXTO_2d	TEXTO_2e

3. CSS implementado no blog

/* Variáveis para fácil customização tabela */
:root {
  --table-border-color: #cfcfcf;          /* cor da linha */
  --table-radius: 10px;                   /* cantos arredondados */
  --cell-padding: 0.6rem 0.9rem;          /* espaçamento das células */
  --header-weight: 700;
  --font-family: 'Roboto', Arial;
  --mobile-stack-breakpoint: 560px;       /* ponto de quebra para mobile */
}

/* Estilos base da tabela */
.table-clean {
  width: 100%;                 /* ocupa toda a tela no desktop */
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-family);
  background: transparent;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  border-radius: var(--table-radius);
  border: 1px solid var(--table-border-color);
  table-layout: auto;
  white-space: nowrap;         /* impede quebra de linha dentro das células */
}

/* Cabeçalho */
.table-clean thead th {
  text-align: left;
  font-weight: var(--header-weight);
  padding: var(--cell-padding);
  border-bottom: 1px solid var(--table-border-color);
  background: transparent;
}

/* Corpo da tabela */
.table-clean tbody td {
  padding: var(--cell-padding);
  border-bottom: 1px solid var(--table-border-color);
  vertical-align: middle;
}

/* Última linha sem borda inferior */
.table-clean tbody tr:last-child td {
  border-bottom: 0;
}

/* Bordas laterais entre colunas */
.table-clean td + td,
.table-clean th + th {
  border-left: 1px solid #eee;
}

/* Hover opcional */
.table-clean tbody tr:hover td {
  background: rgba(0,0,0,0.02);
}

/* Container responsivo */
.table-responsive {
  width: 100%;
  overflow-x: auto;                 /* scroll horizontal no mobile */
  -webkit-overflow-scrolling: touch;/* rolagem suave no iOS */
  border-radius: var(--table-radius);
}

/* Barra de rolagem estilizada (opcional) */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.08);
  border-radius: 6px;
}

/* Ajuste: não empilhar no mobile */
@media (max-width: var(--mobile-stack-breakpoint)) {
  .table-clean,
  .table-clean thead,
  .table-clean tbody,
  .table-clean tr,
  .table-clean td,
  .table-clean th {
    display: table;   /* mantém formato de tabela */
    width: auto;
  }
  .table-clean td,
  .table-clean th {
    white-space: nowrap; /* sem quebra dentro das células */
  }
}