/* ===== TABELA PRETO E BRANCO ===== */

.tabela-container {
    largura: 900px;
    largura máxima: 100%;
    margem: 30px automática;
    overflow-x: automático;
}

mesa {
    largura: 100%;
    colapso de fronteira: colapso;
    família de fontes: Arial, sem serifa;
    fundo: #fff;
}

/* Cabeceira */
th {
    fundo: #000;
    cor: #fff;
    preenchimento: 16px 12px;
    alinhamento do texto: centralizado;
    borda: 1px sólida #333;
}

/* Cúpulas */
td {
    preenchimento: 12px;
    alinhamento do texto: centralizado;
    cor: #000;
    fundo: #fff;
    borda inferior: 1px sólida #ccc;

    transição:
        cor de fundo 0,3s facilidade,
        cor 0,3s facilidade,
        transformar 0,2s facilidade;
}

/* Linhas alternadas em preto e branco */
tbody tr:nth-child(even) td {
    fundo: #f2f2f2;
}

/* ===== HOVER COLORIDO ===== */

tbody tr:hover td {
    fundo: #2c5684;
    cor: #fff;
    cursor: ponteiro;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 900px) {

    .tabela-container {
        largura: 95%;
    }

    º,
    td {
        preenchimento: 10px 8px;
        tamanho da fonte: 14px;
    }
}

@media (max-width: 600px) {

    .tabela-container {
        largura: 100%;
        overflow-x: automático;
    }

    mesa {
        largura mínima: 700px;
    }

    º,
    td {
        tamanho da fonte: 13px;
        preenchimento: 10px 8px;
    }
}