Como fazer uma tabela responsive no Wordpress com tema Divi

CafeSEO · 19/09/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/09/2016

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

kirapain · 19/09/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/09/2016

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

Jarem · 19/09/2016

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

junglaweb · 19/09/2016

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

kanikase · 19/09/2016

kirapain disse:
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/09/2016

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

david limonche · 12/11/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/11/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/11/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/11/2023

david limonche disse:
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 disse:
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 disse:
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/11/2023

Benderslab disse:
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/11/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:

Inserir CODE, HTML ou 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/11/2023

Benderslab disse:
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/11/2023

sabogal disse:
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/11/2023

Benderslab disse:
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/11/2023

Morgabe disse:
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/11/2023

Morgabe disse:
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/11/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.

Como fazer uma tabela responsive no Wordpress com 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

Tópicos similares