@media screen and (max-width: 768px) {
    #tabela,
    #tabela thead,
    #tabela tbody,
    #tabela th,
    #tabela td,
    #tabela tr {
        display: block;
    }

        #tabela thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        #tabela tbody tr {
            border: 1px solid #ccc;
            margin-bottom: 15px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            padding: 8px 0;
            background-color: #fff;
        }

        #tabela td {
            border: none !important;
            position: relative;
            padding-left: 50% !important;
            text-align: right !important;
            white-space: normal;
        }

            #tabela td:before {
                position: absolute;
                top: 50%;
                left: 15px;
                transform: translateY(-50%);
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                text-align: left;
                font-weight: bold;
                color: #495057;
            }

            #tabela td:nth-of-type(1):before {
                content: "Nome";
            }

            #tabela td:nth-of-type(2):before {
                content: "Sigla";
            }

            #tabela td:nth-of-type(3):before {
                content: "Mês Deslig.";
            }

            #tabela td:nth-of-type(4):before {
                content: "Ano Deslig.";
            }

            #tabela td:nth-of-type(5):before {
                content: "Departamento";
            }

            #tabela td:nth-of-type(6):before {
                content: "Vínculo";
            }

            /* Ajuste específico para a primeira coluna com o ícone */
            #tabela td.expandir-row-control {
                text-align: right !important;
            }
}