Okay
  Public Ticket #1742033
Responsive table
Closed

Comments

  • vparrilla started the conversation

    Hi, I've included a Markdown table at https://consev.es/informacion-academica/profesorado/ which has changed the behavior of that page to non-responsive. Is it something that could be addressed through an update of the theme's CSS file? Otherwise, how could I make it responsive? Thanks! Vicente 

  •  955
    Marc replied

    Hi Vicente,

    unfortunately it's not possible to automatically react perfectly on each possible table. There are plugins available which can help to choose how to display "too big" tables on small devices. In your case additional CSS code could help.

    Based on the code here https://css-tricks.com/responsive-data-tables/ I put together a seemingly working example:

    @media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {
        table, thead, tbody, th, td, tr { 
            display: block; 
        }
        
        thead tr { 
            position: absolute;
            top: -9999px;
            left: -9999px;
        }
        tr { border: 1px solid #ccc; }
        td { 
            border: none;
            border-bottom: 1px solid #eee; 
            position: relative;
            padding-left: 50%; 
        }
        td:before {  
            padding: 0 10px; 
            white-space: nowrap;
            font-weight: bold;
        }
        td:nth-of-type(1):before { content: "Nombre:"; }
        td:nth-of-type(2):before { content: "Apellidos:"; }
        td:nth-of-type(3):before { content: "Especialidad:"; }
        td:nth-of-type(4):before { content: "Correo:"; }
        td:nth-of-type(5):before { content: "Web personal:"; }
    }

    The code will target every table currently, so you'd need to add a selector for the page or a special class for this exact table.

    Best,
    Marc

  • vparrilla replied

    Fixed! Many thanks for the solution :)

    Best regards, V.