通过Markdown设置表格列宽


Set table column width via Markdown

我有一个使用Slate的项目，该项目允许使用以下格式的表标记。

1
2
3
4
5
Name | Value
-------|-------------------
`Value-One` | Long explanation
`Value-Two` | Long explanation
`etc` | Long explanation

我的问题是第一列太窄了，并且包装内容(即将代码值分成两行)而不是将其显示在一行上。 我的偏好是，第一列的宽度足以完全显示名称/键，然后第二列可以占用剩余的可用空间。

我的问题是是否有可能(因此，如何)通过标记设置列宽，或者至少通过标记将类添加到表中(以便我可以通过CSS设置特定表的样式)。 还是有更好的方法呢？ 我不想不必用完整的HTML来写表(这是不得已的选择)。

相关讨论

我一直在寻找答案很久了，终于找到了解决方案。 markdown列的宽度由列中最长的单元格确定，因此请根据需要多次使用html空间实体来加宽列。
在编辑模式下看起来很难看，但最终可以解决问题：

1
2
3
4
5
Name                     | Value
-------|-------------------
`Value-One` | Long explanation
`Value-Two` | Long explanation
`etc` | Long explanation
相关讨论

简单添加一个具有预定义宽度的空标签对我来说是有效的：

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

据推测，它是否有效取决于所使用的解析器。以上是在BookStack中。

事实证明，它还取决于用于查看结果表的浏览器。因此，它可能并非在所有情况下都有效。

相关讨论

我不确定这是否适合您的情况。

您可以尝试将表格包装到div中，然后通过CSS设置样式：

1
2
3
Header | header
------ | -----
Bar | bar

CSS：

1
2
3
.foo table {
  styles...
}

应该管用。

希望能有所帮助！

相关讨论

试试这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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      |
+---------+---------+---------+----------+
相关讨论

如果您的Markdown风味支持div元素和内联HTML(也在表中)，则可以使用的解决方案：

1
2
3
| property | description                           |
| --------------------------------------- | ------------------------------------- |
| `border-bottom-right-radius`            | Defines the shape of the bottom-right |

Slate似乎支持内联HTML。

相关讨论

除了前面提到的内容外，我还有两个关于如何控制使用pandoc从MD生成的HTML或潜力PDF中列的宽度的技巧。

1.多行表

请查看文档以获取详细信息，以下是两个示例，可让您根据需要调整列的宽度。

从文档中：

In multiline tables, the table parser pays attention to the widths of the columns, and the writers try to reproduce these relative widths in the output. So, if you find that one of the columns is too narrow in the output, try widening it in the Markdown source.

一个)

1
2
3
4
5
6
7
-----------------------------------------------------------------------
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)
-----------------------------------------------------------------------

b)

1
2
3
4
5
6
7
8
9
10
----------- ------- --------------- -------------------------
   First    row                12.0 Example of a row that
                                    spans multiple lines.

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

: Here's a multiline table without headers.

2.控制表格中的图像宽度

从markdown生成图像表时，我经常发现自己处理溢出。将width = XYZpx参数传递给markdown图片解析器对我来说很有效，非常简单：

1
2
3
4
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}

您还可以在markdown中正确调整图像大小时检查此答案。

您可以根据需要多次附加垂直钢筋。这样，即使在编辑模式下，语法看起来也更加友好。
例：

1
2
3
4
|Name||||||||Value||||||||
|Key1||||||||value2||||||||
|Key2||||||||value2||||||||
|Key3||||||||value3||||||||

我猜这种技术比较方便，因为它在jupyter中不使用CSS。