9.1 Rolagem (Scroll)
As tabelas são frequentemente usadas para exibir dados estruturados, mas podem ser difíceis de visualizar em dispositivos com telas pequenas. As tabelas responsivas ajudam a melhorar a percepção e interação com os dados em diferentes dispositivos, incluindo celulares e tablets. Vamos ver algumas técnicas para criar tabelas responsivas.
Um método simples para criar tabelas responsivas é adicionar rolagem horizontal. Esse método mantém a estrutura da tabela e permite que os usuários rolem os dados horizontalmente em telas estreitas.
Exemplo:
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabela Responsiva com Rolagem</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th>Coluna 3</th>
<th>Coluna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dados 1</td>
<td>Dados 2</td>
<td>Dados 3</td>
<td>Dados 4</td>
</tr>
<!-- Outras linhas -->
</tbody>
</table>
</div>
</body>
</html>
Explicação do código:
.table-container: adiciona rolagem horizontal se a tabela exceder a largura do containertable: define a largura da tabela como 100% e colapsa as bordas das células
9.2 Esconder Colunas (Column Hiding)
Este método envolve esconder colunas menos importantes em telas estreitas, para que os dados principais permaneçam visíveis. Isso pode ser feito usando media queries.
Exemplo:
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabela Responsiva com Colunas Escondidas</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th class="hide">Coluna 3</th>
<th class="hide">Coluna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dados 1</td>
<td>Dados 2</td>
<td class="hide">Dados 3</td>
<td class="hide">Dados 4</td>
</tr>
<!-- Outras linhas -->
</tbody>
</table>
</body>
</html>
Explicação do código:
.hide: esconde certas colunas em telas com largura inferior a 600px usando media queriestable: define a largura da tabela como 100% e colapsa as bordas das células
9.3. Empilhamento (Stacking)
O empilhamento transforma linhas de tabela em blocos que aparecem um abaixo do outro em telas estreitas. Isso torna a tabela mais legível em dispositivos móveis.
Exemplo:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabela Responsiva com Empilhamento</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th>Coluna 3</th>
<th>Coluna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Coluna 1">Dados 1</td>
<td data-label="Coluna 2">Dados 2</td>
<td data-label="Coluna 3">Dados 3</td>
<td data-label="Coluna 4">Dados 4</td>
</tr>
<!-- Outras linhas -->
</tbody>
</table>
</body>
</html>
Explicação do código:
- Media queries: transformam a tabela em elementos de bloco em telas com largura inferior a 600px
td::before: adiciona um pseudo-elemento com o nome da coluna antes de cada valor da célula, para manter o contexto dos dados
9.4. Transformação em Cartões (Card Layout)
Este método transforma cada linha da tabela em um cartão separado em telas estreitas. Isso melhora a legibilidade dos dados em dispositivos móveis.
Exemplo:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabela Responsiva com Cartões</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th>Coluna 3</th>
<th>Coluna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Coluna 1">Dados 1</td>
<td data-label="Coluna 2">Dados 2</td>
<td data-label="Coluna 3">Dados 3</td>
<td data-label="Coluna 4">Dados 4</td>
</tr>
<!-- Outras linhas -->
</tbody>
</table>
</body>
</html>
Explicação do código:
- Media queries: transformam a tabela em elementos de bloco e criam cartões em telas com largura inferior a 600px
td::before: adiciona um pseudo-elemento com o nome da coluna antes de cada valor da célula, para manter o contexto dos dados
9.5 Usando CSS Frameworks
Muitos frameworks CSS, como o Bootstrap, oferecem soluções integradas para criar tabelas responsivas. Usar esses frameworks simplifica o processo e fornece estilos e componentes prontos.
Exemplo usando Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabela Responsiva com Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th>Coluna 3</th>
<th>Coluna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dados 1</td>
<td>Dados 2</td>
<td>Dados 3</td>
<td>Dados 4</td>
</tr>
<!-- Outras linhas -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Explicação do código:
table.table-responsive: classe do Bootstrap que adiciona rolagem horizontal para tabelas em telas estreitascontainer: classe do Bootstrap para centralizar e definir a largura máxima do container
GO TO FULL VERSION