web-dev-qa-db-fra.com

Création d'une disposition de tableau dans l'éditeur WYSIWYG

Je vais avoir un design comme mentionné dans l'image.

 enter image description here 

Le contenu de ceux-ci devrait aller dans un widget. Voici comment je réalise cela maintenant: en le modifiant dans l'éditeur WYSIWYG en utilisant des espaces entre les textes. Y a-t-il un autre moyen d'aligner cela correctement.

Je suis tombé sur de telles dispositions pour bon nombre de mes projets et, jusqu'à présent, j'utilisais des espaces pour les aligner. Mais dans mon projet récent, j'ai constaté qu'utiliser des espaces n'était pas une solution correcte car, dans mon cas, la police que j'utilise se comporte de manière légèrement différente sur différents navigateurs et que l'espace n'est donc pas cohérent.

Donc, en utilisant des espaces, j'obtiens un résultat correct sur chrome mais sur firefox, l'espacement n'est pas le même.

Résultat sur firefox:

 enter image description here 

Je suppose qu'il pourrait y avoir une meilleure solution pour créer une telle mise en page dans l'éditeur WYSIWYG. S'il vous plaît laissez-moi savoir s'il y en a. Merci pour votre temps.

editorwysiwygpost-editor
1
Kiran Dash

Pourquoi n'utilisez-vous pas de table? Les espaces sont ridicules. Sous l'éditeur WYSIWYG, sélectionnez un tableau à 2 colonnes et 3 lignes, alignez les éléments de gauche à gauche et de droite à centre pour que tout fonctionne correctement.

MODIFIER. Ok, je vois où est le problème. TinyMCE (éditeur WYSIWYG) a une option de table, mais elle est désactivée par défaut dans WordPress. Vous pouvez télécharger le plugin, par exemple TinyMCE Advanced , et activer diverses options puissantes de TinyMCE. En outre, vous pouvez basculer l'affichage vers l'éditeur de texte et ajouter un tableau au format HTML:

<table>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td><td>Cell</td>
    </tr>
</table>
1
Krzysztof Grabania