Início /Scripts /Tabelas /Como Criar Tabelas Responsivas com CSS Puro: Com Scroll Horizontal

Como Criar Tabelas Responsivas com CSS Puro: Com Scroll Horizontal

Por: Angelo Luis Ferreira | 20/05/2025 Acessos: 191

Criando tabelas responsivas com CSS - com scroll horizontal

Criar interfaces adaptáveis é uma exigência em qualquer projeto web moderno. E quando falamos de tabelas — estruturas essenciais para exibir dados — o desafio é ainda maior: garantir legibilidade em telas pequenas, sem sacrificar a estrutura nem a estética.

Neste artigo, você vai aprender a criar tabelas responsivas usando apenas HTML e CSS puro — sem frameworks como Bootstrap ou Tailwind.

Ambas técnicas são simples, eficazes, acessíveis e compatíveis com todos os navegadores modernos. Prontas para você aplicar em projetos profissionais, relatórios, sistemas administrativos e mais.

Como Funciona

A responsividade é alcançada envolvendo a <table> em um container com overflow-x: auto. Isso permite que a tabela role horizontalmente em telas pequenas, sem quebrar o layout.

🧱 Estrutura essencial:

<div class="table-wrapper">
  <table>...</table>
</div>

🎨 CSS principal:

.table-wrapper {
  overflow-x: auto; /* Faz a tabela rolar horizontalmente */
}

table {
  width: 100%;
  min-width: 600px; /* Impede a tabela de encolher demais */
}

✅ Vantagens:

  • Fácil de implementar

  • Mantém o layout de colunas

  • Compatível com qualquer número de colunas

  • Sem perder semântica da tabela

O layout do exemplo abaixo é ideal para email, páginas estáticas, dashboards ou apps web simples sem dependência de frameworks.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Table Pure CSS</title>
</head>
<body>
  <div class="container">
    <h1>Tabela Responsiva com  scroll</h1>
    <div class="table-wrapper">
      <table>
        <thead>
          <tr>
            <th>Item</th>
            <th>Name</th>
            <th>Title</th>
            <th>Email</th>
            <th>Role</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Alice Johnson</td>
            <td>Project Manager</td>
            <td>alice@example.com</td>
            <td>Admin</td>
          </tr>
          <tr>
          	<td>2</td>
            <td>Bob Smith</td>
            <td>Developer</td>
            <td>bob@example.com</td>
            <td>Editor</td>
          </tr>
          <tr>
          	<td>3</td>
            <td>Carla Diaz</td>
            <td>Designer</td>
            <td>carla@example.com</td>
            <td>Viewer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

CSS

body {
      margin: 0;
      font-family: sans-serif;
      background-color: #f3f4f6;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    h1 {
      font-size: 1.75rem;
      font-weight: bold;
      margin-bottom: 16px;
    }

    .table-wrapper {
      overflow-x: auto;
      background-color: white;
      padding: 16px;
      border-radius: 16px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 600px;
    }

    thead {
      background-color: #f9fafb;
    }

    th, td {
      text-align: left;
      padding: 12px 24px;
      white-space: nowrap;
    }

    th {
      font-size: 0.75rem;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
    }

    tbody tr {
      border-top: 1px solid #e5e7eb;
    }

EXEMPLO COMPLETO

See the Pen Tabela responsiva CSS com scroll horizontal by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi criado a tabela responsiva do nosso exemplo. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto.

Tente você mesmo »

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários

×

Infomações do site / SEO