Создание табличной разметки в WYSIWYG редакторе

Question

Создание табличной разметки в WYSIWYG редакторе

17 авг. 2016 г., 07:39:40

Просмотры: 14K

Голосов: 1

У меня есть дизайн, показанный на изображении.

Пример табличной разметки в WYSIWYG редакторе

Этот контент должен отображаться в виджете. Сейчас я делаю это следующим образом: редактирую в WYSIWYG редакторе, используя пробелы между текстами. Есть ли другой способ правильно выровнять этот контент?

Я сталкивался с подобными макетами во многих проектах и до сих пор использовал пробелы для выравнивания. Однако в моем последнем проекте я обнаружил, что использование пробелов - неверное решение, потому что выбранный мной шрифт по-разному отображается в разных браузерах, и пробелы не согласованы.

При использовании пробелов я получаю правильный результат в Chrome, но в Firefox интервалы отличаются.

Результат в Firefox:

Проблема с пробелами в Firefox

Думаю, должно быть лучшее решение для создания такой табличной разметки в WYSIWYG редакторе. Пожалуйста, подскажите, если такие существуют. Спасибо за ваше время.

Kiran Dash

381

редактор wysiwyg редактор записей

Комментарии

Вам следует использовать моноширинный шрифт - https://youtu.be/SsoOG6ZeyUI

jgraup

17 авг. 2016 г. 07:43:25

спасибо за предложение и видео. LOL. но я должен использовать тот же шрифт. Так что, нет ли способа добиться того же самого без использования пробелов вообще.

Kiran Dash

17 авг. 2016 г. 08:09:02

http://tympanus.net/codrops/css_reference/text-align/ - основы веб-разработки. Вы можете сделать 3 колонки в таблице. [ выравнивание по правому краю, по центру, по левому краю ]. Но это не место для обсуждения CSS. http://stackoverflow.com/a/9824175/5623301

jgraup

17 авг. 2016 г. 08:23:13

Все ответы на вопрос

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

Почему вы не используете таблицу? Пробелы выглядят нелепо. В WYSIWYG редакторе выберите таблицу с 2 столбцами и 3 строками, выровняйте элементы в левом столбце по левому краю, а в правом по центру, и всё должно работать отлично.

РЕДАКТИРОВАНИЕ. Хорошо, я вижу, в чём проблема. TinyMCE (WYSIWYG редактор) имеет опцию таблицы, но по умолчанию она отключена в WordPress. Вы можете скачать плагин, например TinyMCE Advanced, и включить различные мощные опции TinyMCE. Также вы можете переключиться в режим текстового редактора и добавить таблицу в HTML:

<table>
    <tr>
        <td>Ячейка</td><td>Ячейка</td>
    </tr>
    <tr>
        <td>Ячейка</td><td>Ячейка</td>
    </tr>
    <tr>
        <td>Ячейка</td><td>Ячейка</td>
    </tr>
</table>