通过 Markdown 设置表列宽度

I'm not sure if this works in your case.

You can try wrapping the table into a div and then style it via CSS:

<div class="foo">


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


</div>

CSS:

.foo table {
styles...
}

Should work.

Hope to have helped!

I was looking the answer for a long time and finally figured out this solution. markdown columns width is determined by the longest cell in the column, so use html space entity   as many times as needed to widen the column. it looks ugly in edit mode but finally do the trick:

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

In addition to what was previously mentioned, I have two more tips on how to control width of the columns in a HTML or potentiality PDF generated from a MD with pandoc.

1. mutliline tables

Check the documentation for details, here are two examples that allow you to tune the width of the columns as you wish.

From the documentation:

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.

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. Controlling image width in table

I often found myself dealing with overflow when generating table of images from markdown. Passing in a width=XYZpx argument to markdown image parser did the trick for me and is very simple:

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}

You can also check this answer on correctly sizing images in markdown.

The simple addition of an empty <img> tag with a predefined width worked for me:

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

Presumably, whether it works depends on the parser used. The above was in BookStack.

As it turns out, it also depends on the browser used to view the resulting table. So it might not work in all cases.

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.

Try this:

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

You can append the vertical bar pipe as many times as you want. This way it seems more syntax friendly even in edit mode. Example:

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

I guess this technique is more handy as it doesn't use CSS in jupyter.

It's ridiculous but I ended up doing:

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

Forcing those spaces via ` symbol.

To expand the table column width, use the <br> and     HTML code in the table header.

HTML is actually pretty good at balancing column width and wrapping cell contents without any custom settings.

My problem was that table markdown was injecting a colgroup with fixed widths (presumably based on the th string lengths), which was hardly ideal.

<colgroup>
<col style="width: 50%">
<col style="width: 50%">
<colgroup>

So I overrode that style attribute with CSS:

table colgroup col {
width: auto !important;
}

Now it behaves as expected.

A trick may be adding a non-wrappable line (i.e. arbitrary no. of underscores) after the column heading. i.e. instead of letting the markdown renderer (e.g. on GitHub via web browser) to assign column length:

You add a long underscore line after each column heading (optionally with <br/>, depending on your renderer behavior):

This work-around is not perfect, but works on my GitHub though.