Pregunta sobre Inline Google Spreadsheet Viewer de Wordpress:

Ajustar el ancho de la columna para el visor de hojas de cálculo en línea de Google

Un usuario preguntó 👇

¿Alguien puede ayudarme a ajustar el ancho de las columnas en esta hoja de cálculo de Google incrustada con el plugin Visor de hojas de cálculo en línea de Google?

Lanzador de hilos

(@rebeccacsb)

Hace 2 años, 2 meses

Utilice este enlace en su lugar, ¡gracias!

https://wp.me/P5IH9i-3K9

(@meitar)

Hace 2 años, 2 meses

https://wordpress.org/support/topic/column-width-too-narrow-text-wrapping/

https://wordpress.org/support/topic/change-column-width-6/

https://wordpress.org/support/topic/adjusting-column-widths-link-shortening-discrepancy/

Lanzador de hilos

(@rebeccacsb)

Hace 2 años, 2 meses

¡Gracias @meitar! Ninguno de estos temas proporciona una solución a mi pregunta, sino sugerencias para buscar soluciones en otros lugares, lo que ya he hecho. Entiendo, según sus respuestas en estos temas, que usted, como desarrollador de plugins, no puede brindar soporte para todas las preguntas que la gente pueda tener al respecto, por lo que espero que alguien más pueda ayudarme con esto.

(@meitar)

Hace 2 años, 2 meses

Entiendo, según sus respuestas en estos temas, que usted, como desarrollador de plugins, no puede brindar soporte para todas las preguntas que la gente pueda tener al respecto, por lo que espero que alguien más pueda ayudarme con esto.

Bueno. Por supuesto, debido a que su pregunta es una pregunta general de “cómo hago las cosas con CSS”, es más probable que obtenga ayuda en un foro más general que este. Es posible que desee solicitar ayuda en los foros de soporte de WordPress más poblados si aún no lo ha hecho.

Lanzador de hilos

(@rebeccacsb)

Hace 2 años, 2 meses

¡Bien gracias! Yo también intentaré eso.

(@ericbobrow)

Hace 2 años

Meitar y Rebecca –

Acabo de usar Google Inline Spreadsheet Viewer y he encontrado formas de ajustar el ancho de las columnas usando CSS que creo que se puede usar en general para muchos usuarios.

Le estoy muy agradecido, Meitar, por crear un marco extenso y robusto para este propósito, así que quería recuperarlo compartiendo estos fragmentos de código.

Primero, esta es una página que configuré con un índice para capacitación en video; El índice se mantiene en la hoja de cálculo de Google e informa sobre los diversos temas del video, así como marcas de tiempo para facilitar una búsqueda rápida del contenido:
https://archicadtraining.com/topic/acp-feb 14 de febrero de 2019 /

(Tenga en cuenta que el video en esta página solo está disponible para los miembros registrados, pero la tabla de índice es visible para todos los visitantes).

El atajo que utilicé para este índice es:

[gdoc key="https://docs.google.com/spreadsheets/d/18hHCKjx0OUUuubEW6NYx6kkbnbKg9LJFVrUPc02X-_M/edit?usp=sharing" datatables_page_length="50" datatables_order="%5B%5D"]

Notas: Quería mostrar todas las filas en una página, así que establecí la longitud en 50. Quería que la tabla mostrara el orden de las filas originales en Google Sheet, así que establecí el valor de datatables_order en [] (por lo que escapó se ingresa como% 5B% 5D).

CSS está configurado para hacer que el ancho de la tabla sea del 100% (utilizando el ancho completo del contenedor DIV; las columnas de encabezado y las columnas de valor están configuradas en diferentes porcentajes del 100% según mis preferencias para este uso. Estos porcentajes se pueden modificar para general función, si hay más o menos columnas, por supuesto, la SEC puede editarse.

Aquí está el código CSS que he utilizado con éxito para mis propósitos:

th.col-1, td.col-1 {
    width: 20% !important;
}
th.col-2, td.col-2 {
    width: 35% !important;
}
th.col-3, td.col-3 {
    width: 10% !important;
}
th.col-4, td.col-4 {
    width: 15% !important;
}
th.col-5, td.col-5 {
    width: 10% !important;
}
table.igsv-table.dataTable.no-footer, .dataTables_scrollHeadInner {
    width: 100% !important;
}

Una nota adicional: el código de Datatables no romperá las líneas de ningún enlace web incrustado en Google Sheets y forzará el ancho de la columna para acomodar todo el enlace web. Esto fue muy confuso ya que una de mis columnas era más ancha de lo que quería y nada de lo que hice pudo solucionarlo hasta que entendí la fuente del problema. Lo solucioné en estos casos creando un enlace corto en lugar del original; luego, el valor en esa celda podría ajustarse como quisiera y mantener el ancho en el porcentaje objetivo.

En general, estoy muy satisfecho con esta solución y me gustaría agradecer nuevamente a Meitar por su ayuda a la comunidad. No dude en compartir este fragmento de código y otras notas en su documentación; creo que podría ser muy útil para otros usuarios de su plugin.

Eric Bobrow

Esta respuesta fue modificada hace 2 años por. Motivo: simplificar el fragmento de código CSS

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.