SushiHost

Tutorial WordPress: Hacer una tabla responsive con scroll horizontal elegante

SushiHost

·

·

Introducción

Las tablas HTML son una herramienta imprescindible para mostrar datos en WordPress: comparativas, listados, informes, etc. Sin embargo, en dispositivos móviles y pantallas pequeñas las tablas tradicionales se rompen porque tienen muchas columnas y no caben. Este tutorial explica, paso a paso y con todo lujo de detalles, cómo crear una tabla responsive con scroll horizontal elegante, accesible y fácil de integrar en un tema o plugin de WordPress.

Resumen de la solución

La técnica propuesta se basa en los siguientes puntos clave:

Ventajas de este enfoque

1. Estructura HTML recomendada (ejemplo)

Coloca la tabla dentro de un contenedor que actuará como zona desplazable y tendrá los indicadores visuales. Aquí tienes un ejemplo mínimo de marcado (este bloque es HTML de ejemplo):


  

    
      

        Producto
        Precio
        Stock
        Proveedor
        Envío
        Valoración
        Comentarios
      

    
    
      

        Cámara A
        €399
        24
        Proveedor X
        24-48h
        4.7
        Muy buena relación calidad-precio.

2. CSS: diseño, scroll elegante y cabeceras fijas

El CSS a continuación cubre:

/ Envolver la tabla para habilitar scroll horizontal /
.responsive-table-wrap{
  position: relative
  overflow-x: auto
  -webkit-overflow-scrolling: touch / desplazamiento suave en iOS /
  scrollbar-width: thin / Firefox /
  margin: 0.8rem 0
  padding: 0.25rem 0 / espacio para indicadores /
}

/ Opcional: ocultar scrollbar en WebKit y usar indicador visual en su lugar /
.responsive-table-wrap::-webkit-scrollbar{
  height: 8px
}
.responsive-table-wrap::-webkit-scrollbar-track{
  background: transparent
}
.responsive-table-wrap::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.2)
  border-radius: 999px
}

/ Estilo básico de la tabla /
.responsive-table{
  width: 100%
  border-collapse: collapse
  min-width: 720px / fuerza el scroll si no cabe /
  background: #fff
  font-size: 0.95rem
}

/ Filas y celdas /
.responsive-table th,
.responsive-table td{
  padding: 0.6rem 0.9rem
  text-align: left
  border-bottom: 1px solid rgba(0,0,0,0.06)
  white-space: nowrap / evita wrapping que rompa columnas /
}

/ Cabecera fija /
.responsive-table thead th{
  position: sticky
  top: 0
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%)
  z-index: 3
  border-bottom: 2px solid rgba(0,0,0,0.08)
}

/ Row hover /
.responsive-table tbody tr:hover{
  background: rgba(0, 0, 0, 0.03)
}

/ Indicadores visuales: degradados en los lados /
.responsive-table-wrap::before,
.responsive-table-wrap::after{
  content: 
  position: absolute
  top: 0
  bottom: 0
  width: 2.4rem
  pointer-events: none / no interfieren con el scroll táctil /
  z-index: 2
  transition: opacity 200ms ease
}

/ Degradado izquierdo (indica contenido a la izquierda) /
.responsive-table-wrap::before{
  left: 0
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)
  opacity: 0 / por defecto oculto hasta que se detecte overflow /
}

/ Degradado derecho (indica contenido a la derecha) /
.responsive-table-wrap::after{
  right: 0
  background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)
  opacity: 0
}

/ Cuando exista overflow a la izquierda/derecha, añadiremos clases via JS /
.responsive-table-wrap.has-left::before{
  opacity: 1
}
.responsive-table-wrap.has-right::after{
  opacity: 1
}

/ Mejoras de accesibilidad: foco visible para el contenedor /
.responsive-table-wrap:focus{
  outline: 3px solid rgba(21,156,228,0.35)
  outline-offset: 2px
}

/ Responsive: en pantallas muy pequeñas puedes permitir wrapping en celdas específicas /
@media (max-width: 480px){
  .responsive-table th:nth-child(1),
  .responsive-table td:nth-child(1){
    min-width: 140px / columna principal conserva ancho /
  }
  .responsive-table{
    min-width: 600px / ajusta según contenido /
  }
}

3. JavaScript: detectar overflow y añadir indicadores

Un pequeño script detecta si la tabla tiene contenido que sobresale a izquierda o derecha y añade o quita las clases has-left y has-right. Además, mejora la experiencia para teclado (usar flechas izquierda/derecha para desplazar).

// Selecciona todos los envoltorios
document.querySelectorAll(.responsive-table-wrap).forEach(function(wrap){
  function updateIndicators(){
    var maxScrollLeft = wrap.scrollWidth - wrap.clientWidth
    if (wrap.scrollLeft > 2){
      wrap.classList.add(has-left)
    } else {
      wrap.classList.remove(has-left)
    }
    if (wrap.scrollLeft < maxScrollLeft - 2){
      wrap.classList.add(has-right)
    } else {
      wrap.classList.remove(has-right)
    }
  }

  // Actualizar al cargar, al redimensionar y al hacer scroll
  updateIndicators()
  wrap.addEventListener(scroll, updateIndicators)
  window.addEventListener(resize, updateIndicators)

  // Soporte básico de teclado cuando el wrapper está enfocado
  wrap.addEventListener(keydown, function(e){
    var key = e.key  e.keyCode
    if (key === ArrowRight  key === 39){
      wrap.scrollBy({ left: 120, behavior: smooth })
      e.preventDefault()
    } else if (key === ArrowLeft  key === 37){
      wrap.scrollBy({ left: -120, behavior: smooth })
      e.preventDefault()
    } else if (key === Home  key === 36){
      wrap.scrollTo({ left: 0, behavior: smooth })
      e.preventDefault()
    } else if (key === End  key === 35){
      wrap.scrollTo({ left: wrap.scrollWidth, behavior: smooth })
      e.preventDefault()
    }
  })
})

4. Integración en WordPress: encolar CSS y JS

Es recomendable añadir los estilos y scripts del componente mediante wp_enqueue_style y wp_enqueue_script en el archivo functions.php de tu tema o en el plugin correspondiente. Ejemplo de funciones para encolar los archivos:

/ functions.php (o archivo principal del plugin) /
function mi_tema_enqueue_responsive_table_assets(){
  wp_enqueue_style(
    mi-responsive-table-css,
    get_stylesheet_directory_uri() . /assets/css/responsive-table.css,
    array(),
    1.0
  )

  wp_enqueue_script(
    mi-responsive-table-js,
    get_stylesheet_directory_uri() . /assets/js/responsive-table.js,
    array(),
    1.0,
    true
  )
}
add_action(wp_enqueue_scripts, mi_tema_enqueue_responsive_table_assets)

Si prefieres, puedes inyectar estilos inline o usar el customizer, pero encolar archivos permite caché y mejor mantenimiento.

5. Shortcode para insertar tablas estilizadas

Si quieres una forma cómoda de añadir tablas en entradas o páginas sin tocar HTML, puedes registrar un shortcode que envuelva tablas o genere la tabla directamente. Ejemplo simple:

/ Shortcode: [responsive_table]...html table...[/responsive_table] /
function shortcode_responsive_table(atts, content = null){
  return 

         . do_shortcode(content)
         . 

}
add_shortcode(responsive_table, shortcode_responsive_table)

Uso en el editor (visual o HTML):

[responsive_table]
 ... 

[/responsive_table]

Nota

Si usas el editor Gutenberg, puedes crear un bloque dinámico o simplemente usar un bloque HTML y envolver la tabla con la clase indicada.

6. Accesibilidad y consideraciones avanzadas

  1. Semántica: Mantén la estructura thead/tbody y usa th para encabezados. Evita soluciones que transformen la tabla en elementos no tabulares si la información es tabular.
  2. Lectores de pantalla: El contenedor tiene role=region y aria-label para dar contexto. Si la tabla necesita descripción larga, añade aria-describedby con un id que apunte a un párrafo explicativo.
  3. Teclado: El wrapper es focusable (tabindex=0) y el script permite usar ArrowLeft/ArrowRight/Home/End para navegar horizontalmente.
  4. Pruebas: Prueba en iOS/Android, en Chrome/Firefox/Safari y con zoom del navegador. Verifica también con lectores de pantalla como NVDA o VoiceOver si corresponde al público objetivo.
  5. Impresión: Si necesitas, añade reglas @media print para mostrar la tabla completa o para ocultar los degradados/scrollbars.

7. Personalizaciones y mejoras opcionales

Ejemplo de ajuste para impresión (opcional)

@media print{
  .responsive-table-wrap{
    overflow: visible !important
    -webkit-overflow-scrolling: auto
  }
  .responsive-table thead th{
    position: static / evita problemas con sticky al imprimir /
  }
  .responsive-table{
    min-width: 0
    font-size: 0.9rem
  }
}

8. Checklist final antes de lanzar a producción

  1. Encolados CSS/JS correctos y sin conflictos de nombres de clase.
  2. Tabla semántica (thead/tbody, th) y sin celdas fusionadas innecesarias que rompan el scroll.
  3. Comprobada la experiencia táctil en iOS/Android.
  4. Comprobado el soporte teclado y lector de pantallas básicos.
  5. Test de impresión y ofuscación de scrollbars si lo deseas.

Conclusión

Con un contenedor desplazable, cabeceras sticky, degradados indicadores y un pequeño script para detectar overflow y mejorar el control por teclado, obtendrás una tabla responsive con scroll horizontal elegante y accesible. La integración en WordPress es sencilla mediante la encolación de los assets y, si lo deseas, mediante un shortcode o bloque en Gutenberg. Aplica los fragmentos de código proporcionados, adapta los estilos a la identidad visual de tu tema y realiza pruebas de usabilidad en dispositivos reales antes de desplegar.

SushiHost

Leave a Reply

Your email address will not be published. Required fields are marked *