Установить ширину столбца таблицы с помощью Markdown

У меня есть проект с использованием Slate, который позволяет использовать разметку таблиц в следующем формате.

Name | Value
-------|-------------------
'Value-One' | Long explanation
'Value-Two' | Long explanation
'etc' | Long explanation

Моя проблема заключается в том, что первый столбец слишком узкий и обертывает содержимое (т.е. разбивает значения кода на две строки), а не отображает его на одной строке. Я предпочитаю, чтобы первый столбец был достаточно широким, чтобы полностью отображать имя/ключ, а затем второй столбец может занимать остальную часть доступного пространства.

Мой вопрос: если возможно (и, следовательно, как) установить ширину столбца с помощью разметки или, по крайней мере, добавить класс в таблицу с помощью разметки (чтобы я мог стилизовать определенную таблицу с помощью CSS). Или есть лучший подход к этому? Я бы предпочел не записывать таблицу в полный HTML (что было бы последним вариантом).

Ответ 1

Я не уверен, что это работает в вашем случае.

Вы можете попробовать обертывать таблицу в div, а затем стилизовать ее с помощью CSS:

<div class="foo">

Header | header
------ | -----
Bar | bar

</div>

CSS:

.foo table {
  styles...
}

Должно сработать.

Надеюсь, что помогли!

Ответ 2

Я долго искал ответ и, наконец, понял это решение. ширина столбцов сортировки определяется самой длинной ячейкой в столбце, поэтому используйте html space entity   столько раз, сколько необходимо для расширения столбца. он выглядит уродливым в режиме редактирования, но, наконец, делает трюк:

Name &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | Value
-------|-------------------
'Value-One' | Long explanation
'Value-Two' | Long explanation
'etc' | Long explanation

Ответ 3

Простое добавление пустого <img> с предопределенной шириной работало для меня:

|Name|Value|
|----|---------|
|<img width=200/>|<img width=500/>|

Предположительно, зависит ли он от используемого анализатора. Вышеупомянутое было в BookStack.

Как оказалось, это также зависит от браузера, используемого для просмотра итоговой таблицы. Таким образом, это может не работать во всех случаях.

Ответ 4

В дополнение к тому, что было упомянуто ранее, у меня есть еще два совета о том, как контролировать ширину столбцов в HTML или PDF файле с потенциальными возможностями, сгенерированном из MD с помощью pandoc.

1. Мутлиновые таблицы

За подробностями обращайтесь к документации, вот два примера, которые позволяют настроить ширину столбцов по вашему желанию.

Из документации:

В многострочных таблицах анализатор таблиц обращает внимание на ширину столбцов, и авторы пытаются воспроизвести эти относительные ширины в выходных данных. Поэтому, если вы обнаружите, что один из столбцов слишком узок в выходных данных, попробуйте расширить его в источнике Markdown.

а)

-----------------------------------------------------------------------
type                A                                  B
----- -------------------------------- --------------------------------
 abc  ![img](assets/some-image-n1.png) ![img](assets/some-image-n2.png)

defg  ![img](assets/some-image-n3.png) ![img](assets/some-image-n4.png)
-----------------------------------------------------------------------

б)

----------- ------- --------------- -------------------------
   First    row                12.0 Example of a row that
                                    spans multiple lines.

  Second    row                 5.0 Here another one. Note
                                    the blank line between
                                    rows.
----------- ------- --------------- -------------------------

: Here a multiline table without headers.

2. Управление шириной изображения в таблице

Я часто сталкивался с переполнением при создании таблицы изображений из уценки. Передача аргумента width = XYZpx синтаксическому анализатору изображений уценки сделала для меня хитрость и очень проста:

type | *A* | *B*
:---: | :---: | :---:
abc |![img](assets/some-image-n1.png){width=200px}|![img](assets/some-image-n2.png){width=200px}
def |![img](assets/some-image-n3.png){width=200px}|![img](assets/some-image-n4.png){width=200px}

Вы также можете проверить этот ответ на правильную настройку размеров изображений в уценке.

Ответ 5

Решение, которое может работать, если ваш аромат Markdown поддерживает элементы div и встроенный HTML (также в таблицах):

| <div style="width:290px">property</div> | description                           |
| --------------------------------------- | ------------------------------------- |
| 'border-bottom-right-radius'            | Defines the shape of the bottom-right |

Похоже, что Slate поддерживает встроенный HTML.

Ответ 6

Попробуйте это:

<style>
table th:first-of-type {
    width: 10%;
}
table th:nth-of-type(2) {
    width: 10%;
}
table th:nth-of-type(3) {
    width: 50%;
}
table th:nth-of-type(4) {
    width: 30%;
}
</style>


+---------+---------+---------+----------+
| Header1 | header2 | header3 | header4  |
+---------+---------+---------+----------+
| Bar     | bar     | bar     | bar      |
+---------+---------+---------+----------+