El bloque tabla no permite añadir css

  • depalique

    (@depalique)


    hace 4 años, 4 meses

    Hola.

    Tras la actualización a la versión 5.3 los cambios introducidos en el bloque tabla hacen que no funcionan los estilos css añadidos.

    He añadido a la página un estilo para que las tablas sean responsive y se adapten a las pantallas de los teléfonos móviles. Este funcionaba correctamente en la versión wordpress 5.2x

    /*Tabla responsive*/
@media only screen and (max-width: 768px) {
table.responsive {
margin-bottom: 0;
overflow: hidden;
overflow-x: scroll;
display: block;
white-space: nowrap;
}
}

    Para activarlo añado el estilo «responsive» en el código html del bloque tabla.

    <table class="wp-block-table responsive is-style-stripes">...</table>

    Lo que ocurre con el nuevo editor de tablas es que no permite añadir nuevas clases y si lo indicas en avanzado crea una etiqueta <figure> que no hace nada.

    Cuando se intenta añadir el estilo css a la etiqueta <table> el bloque se bloquea y lanza el mensaje «este bloque tiene un contenido inesperado o no válido».
    El hecho es que no puedo hacer que las tablas sean responsive y se adapen a pantallas pequeñas.

    ¿Alguien sabe alguna forma de solucionar este problema?

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • Moderador LGrusin

    (@lgrusin)

    hace 4 años, 4 meses

    ¿Qué tema estás usando? La mayoría son responsive y no hay que añadir ningún código adicional.

    La clase CSS de la tabla la pones en la columna derecha de edición del bloque, en Avanzado – Clase Adicional.

    De todas formas prueba sin el table, es decir;

    .responsive {
margin-bottom: 0;
overflow: hidden;
overflow-x: scroll;
display: block;
white-space: nowrap;
}
    Iniciador del debate depalique

    (@depalique)

    hace 4 años, 4 meses

    Hola, gracias por la ayuda hice los cambios pero es independiente del tema.

    En la versión 5.2x de wordpress el bloque tabla genera este código:

    <table class="wp-block-table responsive is-style-stripes">...</table>

    y hace que el scroll izquierda derecha de la tabla funcione en pantallas pequeñas.

    Al actualizar a la versión 5.3 el bloque tabla ha sido modificado y genera este otro código:

    <figure class="wp-block-table responsive is-style-stripes"><table class="">...</table></figure>

    El estilo responsive creado para el scroll de la tabla y que hace que no cambie su estructura no funciona dentro de la etiqueta <figure class="..."></figure>

    Si intento escribir algo dentro de la etiqueta <table class="responsive">...</table> el bloque no lo permite y lanza este mensaje de error «este bloque tiene un contenido inesperado o no válido».

    Da a entender que el bloque tiene unos valores predeterminados y no permite introducir ninguno nuevo y no veo que con la etiqueta <figure></figure> pueda resolver el scroll de las tablas.

    La única forma que veo sería restaurar el bloque tabla de la versión anterior o modificar el existente, es posible que sea un archivo .js

    ¿Sabéis cómo localizar el archivo que contien este bloque en la estructura de carpetas de wordpress?

    • Esta respuesta fue modificada hace 4 años, 4 meses por depalique.
    • Esta respuesta fue modificada hace 4 años, 4 meses por depalique.
    Moderador LGrusin

    (@lgrusin)

    hace 4 años, 4 meses

    Los estilos CSS del tema no estám preparados para la clase wp-block-table. También puedes probar en el menú Apariencia – Personalizar – CSS Adicional:

    .wp-block-table {
 margin-bottom: 0;
overflow: hidden;
overflow-x: scroll;
display: block;
white-space: nowrap;
}

    Creo que no te hará falta añadir la clase .responsive.

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘El bloque tabla no permite añadir css’ está cerrado a nuevas respuestas.