Tabelas
- Home >
- Componentes >
- Tabelas
Tabelas
Tabela Linha 1 | Tabela | Tabela | Tabela | Tabela Grande |
---|---|---|---|---|
Linha 0 | Título 1 | Título 2 | Título 3 | Título 4 |
Linha 1 | Conteúdo | Conteúdo | Conteúdo | Conteúdo |
Linha 2 | Conteúdo | Conteúdo | - | Conteúdo |
Linha 3 | Conteúdo | |||
Linha 4 | Conteúdo |
- HTML
- CSS
<div class="table-wrapper">
<div class="lead4">Título da tabela</div>
<table>
<thead>
<tr>
<th class="span4">Tabela Linha 1</th>
<th class="span2">Tabela</th>
<th class="span2">Tabela</th>
<th class="span2">Tabela</th>
<th class="span2">Tabela Grande</th>
</tr>
</thead>
<tbody>
<tr>
<td>Linha 0</td>
<td>Título 1</td>
<td>Título 2</td>
<td>Título 3</td>
<td>Título 4</td>
</tr>
<tr>
<td>Linha 1</td>
<td>Conteúdo</td>
<td><a href="#">Conteúdo</a></td>
<td>Conteúdo</td>
<td>Conteúdo</td>
</tr>
<tr>
<td>Linha 2</td>
<td>Conteúdo</td>
<td>Conteúdo</td>
<td>-</td>
<td>Conteúdo</td>
</tr>
<tr>
<td>Linha 3</td>
<td colspan="4">Conteúdo</td>
</tr>
<tr>
<td>Linha 4</td>
<td colspan="4">Conteúdo</td>
</tr>
</tbody>
</table>
</div>
.table-wrapper .lead4{
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.table-wrapper table{
width: 100%;
}
.table-wrapper table th{
background: #808184;
font-family: "latobold";
font-size: 16px;
color: #fff;
text-align: center;
padding: 7px 15px;
border: 1.5px solid #fff;
vertical-align: middle;
line-height: normal;
}
.table-wrapper table tbody tr td{
font-family: "latoregular";
font-size: 14px;
line-height: normal;
color: #808184;
background: #E6E7E8;
padding: 13px 15px;
border: 1.5px solid #fff;
text-align: center;
}
.table-wrapper table tbody tr td a,
.table-wrapper table tbody tr td a:hover {
text-decoration: none;
color: #2980B9;
}
.table-wrapper table tbody tr td:first-child{
background: #F1F1F2;
text-align: left;
}
.table-wrapper table tbody tr:first-child td{
background: #E6E7E8;
color: #2A2A2A;
text-align: center;
font-family: "latobold";
font-size: 16px;
}
.table-wrapper table tbody tr:first-child td:first-child,
.table-wrapper table th:first-child{
text-align: left;
}
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.