Cómo hacer una tabla responsive en Wordpress con tema Divi

CafeSEO · 19 Sep 2016

Buenas.

Alguién sabe como hacer una tabla responsive en una página de una web hecha en Wordpress. EStoy usando el tema Divi.

Gracias!

Enrique J Ros · 19 Sep 2016

Con HTML, expresando los anchos en % y no en px

kirapain · 19 Sep 2016

Como te dicen puedes hacerla en HTML expresando los anchos en %, para ayudarte puedes usar un generador de tablas como tablesgenerator o si tu template posee bootstrap puedes usar las clases de tablas del mismo

CafeSEO · 19 Sep 2016

Gracias Chicos voy a ver si me aclaro y lo consigo jeje. Lo de tablesgenerator tiene muy buena pinta!! Gracias!! 🙂 🙂

Jarem · 19 Sep 2016

Quizas te sirva: https://wordpress.org/plugins/mce-table-buttons/

junglaweb · 19 Sep 2016

puedes usar uno de estos plugins: Magic Liquidizer Responsive Table ULTIMATE TABLES Table Maker Bootstrap Shortcodes for WordPress

kanikase · 19 Sep 2016

kirapain dijo:
Como te dicen puedes hacerla en HTML expresando los anchos en %, para ayudarte puedes usar un generador de tablas como tablesgenerator o si tu template posee bootstrap puedes usar las clases de tablas del mismo

La mejor opción como dice este user es bootstrap 🙂

CafeSEO · 19 Sep 2016

Guau gracias voy a verlos todos!! Gracias de verdad! :welcoming:

david limonche · 12 Nov 2023

Para crear una tabla responsive en WordPress, Puedes utilizar un plugins como "TablePress" o "WP Table Builder" que te permitirán crear tablas responsive de manera sencilla.
Instala y activa el plugin desde tu panel de WordPress.

Una vez que hayas instalado el plugin, podrás crear tu tabla directamente desde el panel de tu WordPress.
Puedes ingresar los datos de la tabla manualmente o importarlos...

Puko · 12 Nov 2023

solo haces la estructura basica <table> en porcentaje, lo pones dentro de un div principal con px o 100%…
lo puedes ver si le das click en .50px , .25px en el codepen o abriendolo en otra pestaña

Morgabe · 13 Nov 2023

Tal y como te indican: usar % en vez de px fijos.. en los anchos o altos...

Aparte yo que tú implementaría: https://getbootstrap.com/2.0.2/
Tiene recursos para todo puedes hacer tablas y configurarlas como te salga de las narices. ^^

Benderslab · 13 Nov 2023

david limonche dijo:
Para crear una tabla responsive en WordPress, Puedes utilizar un plugins como "TablePress" o "WP Table Builder" que te permitirán crear tablas responsive de manera sencilla.
Instala y activa el plugin desde tu panel de WordPress.

Una vez que hayas instalado el plugin, podrás crear tu tabla directamente desde el panel de tu WordPress.
Puedes ingresar los datos de la tabla manualmente o importarlos...

Puko dijo:
solo haces la estructura basica <table> en porcentaje, lo pones dentro de un div principal con px o 100%…
lo puedes ver si le das click en .50px , .25px en el codepen o abriendolo en otra pestaña

Morgabe dijo:
Tal y como te indican: usar % en vez de px fijos.. en los anchos o altos...

Aparte yo que tú implementaría: https://getbootstrap.com/2.0.2/
Tiene recursos para todo puedes hacer tablas y configurarlas como te salga de las narices. ^^

Habrá que ver si después de 7 años aun necesita hacer responsiva su pobre tabla.

Morgabe · 13 Nov 2023

Benderslab dijo:
Habrá que ver si después de 7 años aun necesita hacer responsiva su pobre tabla.

xD ni me fijé en la fecha la verdad.. vi que estaba visible en la primera página me metí y ala xD libre albedrío..

Perdón por resucitar el post, aunque a carácter práctico e informativo la recomendación de bootstrap es legítima y sirve para gente buscando lo mismo, me doy por satisfecho con mi servicio ^^

sabogal · 13 Nov 2023

Yo utilizo una tabla html sin width de ningún tipo y sin utilizar id para la tabla con el siguiente código css y me va perfecta:

Insertar CODE, HTML o PHP:

tbody {
    width: 100%;
    display: inline-table
}
table {
    border-collapse: collapse;
    overflow-x: auto;
    display: flex;
    margin: 30px 0;
    width: 100%;
    color: #333;
    border-top: 2px solid #0091D5;
    font-size: 17px !important
}
th {
    background-color: #f2f2f2;
    font-weight: 700;
    text-align: left;
    padding: 8px;
    border: 1px solid #ccc;
    font-size: 18px !important;
    text-align: center;
    font-weight: bold
}
tr:nth-child(even) td {
    background-color: #f5f5f5
}
tr:nth-child(odd) td {
    background-color: #fff
}
td {
    background-color: #fff;
    text-align: left;
    padding: 8px;
    border: 1px solid #ccc
}
tr:hover td {
    background-color: #e5e5e5
}

Puko · 13 Nov 2023

Benderslab dijo:
Habrá que ver si después de 7 años aun necesita hacer responsiva su pobre tabla.

Ya lo he dicho que no lo pongo para que me conteste, ya se que fecha tiene, solo es por si alguien lo necesita
y asi en varios temas

Puko · 13 Nov 2023

sabogal dijo:
Yo utilizo una tabla html sin width de ningún tipo y sin utilizar id para la tabla con el siguiente código css y me va perfecta:

Es lo mismo con div o <tbody>

si no tiene se ajusta con el que le pusiste en tbody {width: 100%; a algun div donde este dentro tbody y toma esa medida

<div> 500px
<tbody> 100% = 500px o en lugar del div le pones 500px y asi ya no ocupa div/id
<table>
...

david limonche · 13 Nov 2023

Benderslab dijo:
Habrá que ver si después de 7 años aun necesita hacer responsiva su pobre tabla.

Bro,
Pos.. yo que se 😅😂

solo me encontré este post en Google y ya que tengo una cuenta pues decidí revivir la conversación xd

david limonche · 13 Nov 2023

Morgabe dijo:
xD ni me fijé en la fecha la verdad.. vi que estaba visible en la primera página me metí y ala xD libre albedrío..

Perdón por resucitar el post, aunque a carácter práctico e informativo la recomendación de bootstrap es legítima y sirve para gente buscando lo mismo, me doy por satisfecho con mi servicio ^^

No pasa nada, podemos revivir lo que se no venga en gana, siempre y cuando nuestro comentario aporte un poco más de valor 😎👍

david limonche · 13 Nov 2023

Morgabe dijo:
xD ni me fijé en la fecha la verdad.. vi que estaba visible en la primera página me metí y ala xD libre albedrío..

Perdón por resucitar el post, aunque a carácter práctico e informativo la recomendación de bootstrap es legítima y sirve para gente buscando lo mismo, me doy por satisfecho con mi servicio ^^

Y más aún cuando se trata de crear tablas jeje

Puede parecer simple.. pero a la vez es confuso..
Existen muchas formas de Crear tablas en HTML
Así como existen formas de centrar un div en HTML

Es arte xd 😎🤙
(Referencia humorística a un vídeo de soydalto)

EspErpENto · 16 Nov 2023

Trabajando con WP tienes la opción nativa de usar un Widget de Tablas y te evitas usar un plugins o ponerte a crear código.

Esa sería mi primera opción.

Cómo hacer una tabla responsive en Wordpress con tema Divi

CafeSEO

Enrique J Ros

kirapain

CafeSEO

Jarem

junglaweb

kanikase

CafeSEO

david limonche

Puko

Morgabe

Benderslab

Morgabe

sabogal

Puko

Puko

david limonche

david limonche

david limonche

EspErpENto

Temas similares