通过Markdown设置表格列宽

Question

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

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

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

我的问题是,是否有可能(以及如何)通过标记设置列宽,或者至少通过标记向表中添加一个类(这样我就可以通过CSS设置特定的表格).或者有更好的方法吗？我宁愿不用完整的HTML写出表格(这将是最后的选择).

Answer 1

我很长一段时间都在寻找答案,最终找到了解决方案.markdown列的宽度由列中最长的单元格确定,因此请 根据需要多次使用html space实体来扩展列.它在编辑模式下看起来很丑陋,但最终还是诀窍:

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

Answer 2

尝试这个：

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

A solution that can work if your Markdown flavor supports div elements and inline HTML (also in tables):

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

It seems like Slate supports inline HTML.

Answer 6

一个技巧可能是在列标题后添加不可换行的行（即任意数量的下划线）。即，不要让 Markdown 渲染器（例如通过网络浏览器在 GitHub 上）分配列长度：

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n

ID	姓名	地址声明	电话
1	塞西莉亚·查普曼	711-2880 Nulla St., Mankato Mississippi 96522。 当他走向拐角处的药房时，他不由自主地转过头，因为一道光从他的太阳穴处反射出来，看到了，我们用那种快速的微笑迎接彩虹或玫瑰，令人眼花缭乱的白色平行四边形天空从带有镜子的货车\xe2\x80\x94a梳妆台上卸下来，穿过梳妆台，就像穿过电影屏幕一样，清晰地反射出树枝滑动和摇摆的影子，不是在树上，而是以一种人类的犹豫不决，是由那些承载着这片天空、这些树枝、这片滑翔的立面的人的本性所产生的。（弗拉基米尔·纳博科夫，\xe2\x80\x9c礼物。\xe2\x80\x9d）	(257)563-7401
2	艾里斯·沃森	PO Box 283 8562 Fusce Rd., Frederick Nebraska 20620。在那个偷了他车的盲人主动提出帮助盲人的那一刻，他并没有任何恶意，恰恰相反，他所做的并没有什么。不仅要服从慷慨和利他的感情，众所周知，这是人性的两个最好的特征，而且比这个更顽固的罪犯身上也有这种特征，一个简单的偷车贼，在他的职业中没有任何进步的希望，被这个企业的真正所有者所剥削，因为正是他们利用了穷人的需要。（何塞·萨拉马戈，\xe2\x80\x9c失明。\xe2\x80\x9d）	(372)587-2335
3	塞莱斯特·斯莱特	606-3727 乌兰公司。Street, Roseville NH 11523。我非常上镜的母亲在我三岁时死于一次奇怪的事故（野餐、闪电），除了在最黑暗的过去中留下的一点温暖外，她的一切都不再存在于记忆的空洞和山谷中，如果你还能忍受我的风格（我在观察下写作），我婴儿期的太阳已经落下：当然，你们都知道那些散发着香气的白天的残余物，悬浮在一些盛开的树篱周围，或者突然进入夏日黄昏，漫步者在山脚下走过；毛茸茸的温暖，金色的蠓。（弗拉基米尔·纳博科夫，\xe2\x80\x9c洛丽塔。\xe2\x80\x9d）	(786)713-8616

\n

\n

您可以在每个列标题后添加一个长下划线（可以选择使用 <br/>，具体取决于您的渲染器行为）：

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n

ID _____	姓名 __________	地址声明 ______________________________________________________________________________________________________________	电话 _____
1	塞西莉亚·查普曼	711-2880 Nulla St., Mankato Mississippi 96522。 当他走向拐角处的药房时，他不由自主地转过头，因为一道光从他的太阳穴处反射出来，看到了，我们用那种快速的微笑迎接彩虹或玫瑰，令人眼花缭乱的白色平行四边形天空从带有镜子的货车\xe2\x80\x94a梳妆台上卸下来，穿过梳妆台，就像穿过电影屏幕一样，清晰地反射出树枝滑动和摇摆的影子，不是在树上，而是以一种人类的犹豫不决，是由那些承载着这片天空、这些树枝、这片滑翔的立面的人的本性所产生的。（弗拉基米尔·纳博科夫，\xe2\x80\x9c礼物。\xe2\x80\x9d）	(257)563-7401
2	艾里斯·沃森	PO Box 283 8562 Fusce Rd., Frederick Nebraska 20620。在那个偷了他车的盲人主动提出帮助盲人的那一刻，他并没有任何恶意，恰恰相反，他所做的并没有什么。不仅要服从慷慨和利他的感情，众所周知，这是人性的两个最好的特征，而且比这个更顽固的罪犯身上也有这种特征，一个简单的偷车贼，在他的职业中没有任何进步的希望，被这个企业的真正所有者所剥削，因为正是他们利用了穷人的需要。（何塞·萨拉马戈，\xe2\x80\x9c失明。\xe2\x80\x9d）	(372)587-2335
3	塞莱斯特·斯莱特	606-3727 乌兰公司。Street, Roseville NH 11523。我非常上镜的母亲在我三岁时死于一次奇怪的事故（野餐、闪电），除了在最黑暗的过去中留下的一点温暖外，她的一切都不再存在于记忆的空洞和山谷中，如果你还能忍受我的风格（我在观察下写作），我婴儿期的太阳已经落下：当然，你们都知道那些散发着香气的白天的残余物，悬浮在一些盛开的树篱周围，或者突然进入夏日黄昏，漫步者在山脚下走过；毛茸茸的温暖，金色的蠓。（弗拉基米尔·纳博科夫，\xe2\x80\x9c洛丽塔。\xe2\x80\x9d）	(786)713-8616

\n

\n

这个解决方法并不完美，但可以在我的 GitHub 上运行。

\n

Answer 7

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

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

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}

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

Answer 8

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

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

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