Question

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

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

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

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

Answer 1

我很长一段时间都在寻找答案，最终找到了解决方案。 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 2

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

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

大概是否起作用取决于所使用的解析器。以上是在BookStack中。

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

Answer 3

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

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

好像是板岩supports inline HTML。

Answer 4

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

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

<div class="foo">

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

</div>

CSS：

.foo table {
  styles...
}

应该工作。

希望有所帮助！

Answer 5

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

<强> 1。 mutliline tables

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

来自文档：

在多行表中，表解析器会关注列的宽度，并且编写器会尝试在输出中重现这些相对宽度。因此，如果您发现其中一列在输出中太窄，请尝试在Markdown源中加宽它。

A）

-----------------------------------------------------------------------
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生成图像表时处理溢出问题。将宽度= 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正确调整图像大小。

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|

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

通过Markdown设置表格列宽

8 个答案: