.table-responsive {
    overflow-x: auto;
    max-width: 100%;
    position: relative;
    border: 1px solid #ccc;

    /* Gradientes Lineares para sombra vertical uniforme */
    background: 
        /* 1. Cobertura branca esquerda (move com o scroll) */
        linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), 
        /* 2. Cobertura branca direita (move com o scroll) */
        linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 100% 0, 
        /* 3. Sombra cinza fixa na esquerda */
        linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)), 
        /* 4. Sombra cinza fixa na direita */
        linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) 100% 0;

    background-repeat: no-repeat;
    background-color: white;
    
    /* Largura das sombras (ajuste o 15px se quiser a sombra mais larga) */
    background-size: 40px 100%, 40px 100%, 15px 100%, 15px 100%;
    
    /* O segredo: local faz o branco sumir ao rolar, scroll mantém o cinza parado */
    background-attachment: local, local, scroll, scroll;
}