Crear diseño de tabla en editor WYSIWYG

Question

Crear diseño de tabla en editor WYSIWYG

17 ago 2016, 07:39:40

Vistas: 14K

Votos: 1

Tengo un diseño como el mostrado en la imagen.

Ejemplo de diseño tabular

El contenido para esto debe ir en un widget. Actualmente lo estoy logrando editándolo en el editor WYSIWYG usando espacios entre los textos. ¿Existe alguna otra forma de alinear esto correctamente?

Me he encontrado con este tipo de diseños en muchos de mis proyectos y hasta ahora he estado usando espacios para alinearlos. Pero en mi proyecto reciente descubrí que usar espacios no es la solución correcta porque en mi caso, la fuente que estoy usando se comporta de manera diferente en distintos navegadores y por lo tanto el espacio no es consistente.

Así que, usando espacios obtengo el resultado correcto en Chrome pero en Firefox el espaciado no es el mismo.

Resultado en Firefox:

Problema de alineación en Firefox

Supongo que debe haber una mejor solución para crear este tipo de diseño tabular en el editor WYSIWYG. Por favor hágamelo saber si existe alguna. Gracias por su tiempo.

Kiran Dash

381

editor wysiwyg editor de entradas

Comentarios

Deberías usar una fuente monoespaciada - https://youtu.be/SsoOG6ZeyUI

jgraup

17 ago 2016 07:43:25

gracias por la sugerencia y el video. LOL. pero debería usar la misma fuente. Entonces, ¿no hay manera de lograr lo mismo sin usar espacios para nada?

Kiran Dash

17 ago 2016 08:09:02

http://tympanus.net/codrops/css_reference/text-align/ - desarrollo web 101. Puedes hacer 3 columnas en una tabla. [ alinear-derecha, centro, alinear-izquierda ]. Pero este no es el lugar para discutir CSS. http://stackoverflow.com/a/9824175/5623301

jgraup

17 ago 2016 08:23:13

Todas las respuestas a la pregunta

Krzysztof Grabania 586 · Accepted Answer · 2016-08-17T08:32:47Z

¿Por qué no estás usando tablas? Los espacios son ridículos. En el editor WYSIWYG selecciona una tabla con 2 columnas y 3 filas, alinea los elementos en la columna izquierda a la izquierda y en la derecha al centro y todo debería funcionar bien.

EDIT. Ok, ya veo dónde está el problema. TinyMCE (el editor WYSIWYG) tiene la opción de tabla, pero por defecto está deshabilitada en WordPress. Puedes descargar un plugin, por ejemplo TinyMCE Advanced, y habilitar varias y potentes opciones de TinyMCE. También puedes cambiar a la vista de editor de texto y añadir la tabla en HTML:

<table>
    <tr>
        <td>Celda</td><td>Celda</td>
    </tr>
    <tr>
        <td>Celda</td><td>Celda</td>
    </tr>
    <tr>
        <td>Celda</td><td>Celda</td>
    </tr>
</table>

Krzysztof Grabania

586

17 ago 2016 08:32:47