通过 Markdown 设置 table 列宽

Question

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

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

我的问题是第一列显示得太窄，并且将内容换行（即将代码值分成两行）而不是在一行中显示。我的偏好是第一列足够宽以完全显示 name/key，然后第二列可以占据剩余的可用 space.

我的问题是是否可以（以及如何）通过标记设置列宽，或者至少通过标记将 class 添加到 table（这样我就可以通过 CSS 设置特定 table 的样式）。或者有更好的方法吗？我不想把 table 写完整 HTML（这是最后的选择）。

Answer 1

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

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

<div class="foo">

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

</div>

CSS:

.foo table {
  styles...
}

应该可以。

希望对您有所帮助！

Answer 2

我找了很久的答案，终于找到了这个解决方案。 Markdown 列的宽度由列中最长的单元格决定，因此根据需要多次使用 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

Answer 3

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

1。 mutliline tables

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

来自文档：

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.

一）

-----------------------------------------------------------------------
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。在 table

中控制图像宽度

我经常发现自己在从 markdown 生成 table 图像时遇到溢出问题。将 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 4

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

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

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

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

Answer 5

如果您的 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 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      |
+---------+---------+---------+----------+

Answer 7

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

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

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

Answer 8

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

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

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

Answer 9

要扩展table列宽，请使用<br>和   HTML代码tableheader。

通过 Markdown 设置 table 列宽

Set table column width via Markdown

markdown