Set table column width via Markdown

I have a project using Slate, which allows using table markup in the following format.

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

My problem is that the first column is rendered too narrow, and is wrapping the content (i.e. breaking the code values onto two lines) rather than displaying it on a single line. My preference is that the first column be wide enough to display the name/key fully, and then the second column can take up the rest of the available space.

My question is if it is possible (and therefore, how) to set the column width via markup, or at least add a class to the table via markup (so that I can style a particular table via CSS). Or is there a better approach to this? I'd prefer not to have to write out the table in full HTML (which would be a last resort option).

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

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.

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.

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!

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

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.

It's ridiculous but I ended up doing:

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

Forcing those spaces via ` symbol.

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.