Tabelas

Título da tabela
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
Código
Ocultar Código
  • 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;
}