通过 Markdown 设置表格列宽

Question

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

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

我的问题是第一列呈现得太窄，并且正在包装内容（即将代码值分成两行）而不是在单行上显示它。我的偏好是第一列足够宽以完全显示名称/键，然后第二列可以占用剩余的可用空间。

我的问题是是否可以（以及如何）通过标记设置列宽，或者至少通过标记向表格添加一个类（以便我可以通过 CSS 设置特定表格的样式）。或者有更好的方法吗？我不想用完整的 HTML 写出表格（这是最后的选择）。

Answer 1

我找了很久，终于找到了这个解决方案。 markdown 列的宽度由列中最长的单元格决定，因此可以根据需要多次使用 html 空间实体  来加宽列。 它在编辑模式下看起来很丑，但最终成功了：

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

Answer 2

如果您的 Markdown 风格支持 div 元素和内联 HTML（也在表格中），则该解决方案可以工作：

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

好像是 Slate supports inline HTML。

Answer 3

简单地添加一个具有预定义宽度的空 <img> 标记对我有用：

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

大概，它是否有效取决于使用的解析器。以上在 BookStack 中。

事实证明，它还取决于用于查看结果表的浏览器。所以它可能不适用于所有情况。

Answer 4

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

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

<div class="foo">

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

</div>

CSS：

.foo table {
  styles...
}

应该可以。

希望有所帮助！

Answer 5

试试这个：

<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      |
+---------+---------+---------+----------+

Answer 6

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

1. mutliline tables

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

来自文档：

在多行表中，表解析器会注意列的宽度，编写器会尝试在输出中重现这些相对宽度。因此，如果您发现输出中的某一列太窄，请尝试在 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)
-----------------------------------------------------------------------

b)

----------- ------- --------------- -------------------------
   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 图像解析器对我来说很有效，而且非常简单：

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}

您还可以检查 this answer 在 Markdown 中正确调整图像大小。

Answer 7

这很荒谬，但我最终做了：

|`          Name           `|`          Value          `|
|----|---------|
|value1|value2|

通过 ` 符号强制使用这些空格。

Answer 8

您可以根据需要多次附加竖线管道。这样，即使在编辑模式下，它看起来也更加语法友好。 示例：

|Name||||||||Value||||||||
|Key1||||||||value2||||||||
|Key2||||||||value2||||||||
|Key3||||||||value3||||||||

我想这种技术更方便，因为它在 jupyter 中不使用 CSS。