Set table column width via Markdown

Question

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

Answer 1

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 2

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

Answer 3

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.

Answer 4

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

Answer 5

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!

Answer 6

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.

Answer 7

It's ridiculous but I ended up doing:

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

Forcing those spaces via ` symbol.

Answer 8

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:

ID	Name	Address Statement	Phone
1	Cecilia Chapman	711-2880 Nulla St., Mankato Mississippi 96522. As he crossed toward the pharmacy at the corner he involuntarily turned his head because of a burst of light that had ricocheted from his temple, and saw, with that quick smile with which we greet a rainbow or a rose, a blindingly white parallelogram of sky being unloaded from the van—a dresser with mirrors across which, as across a cinema screen, passed a flawlessly clear reflection of boughs sliding and swaying not arboreally, but with a human vacillation, produced by the nature of those who were carrying this sky, these boughs, this gliding façade. (Vladimir Nabokov, “The Gift.”)	(257) 563-7401
2	Iris Watson	P.O. Box 283 8562 Fusce Rd., Frederick Nebraska 20620. On offering to help the blind man, the man who then stole his car, had not, at that precise moment, had any evil intention, quite the contrary, what he did was nothing more than obey those feelings of generosity and altruism which, as everyone knows, are the two best traits of human nature and to be found in much more hardened criminals than this one, a simple car-thief without any hope of advancing in his profession, exploited by the real owners of this enterprise, for it is they who take advantage of the needs of the poor. (Jose Saramago, “Blindness.”)	(372) 587-2335
3	Celeste Slater	606-3727 Ullamcorper. Street, Roseville NH 11523. My very photogenic mother died in a freak accident (picnic, lightning) when I was three, and, save for a pocket of warmth in the darkest past, nothing of her subsists within the hollows and dells of memory, over which, if you can still stand my style (I am writing under observation), the sun of my infancy had set: surely, you all know those redolent remnants of day suspended, with the midges, about some hedge in bloom or suddenly entered and traversed by the rambler, at the bottom of a hill, in the summer dusk; a furry warmth, golden midges. (Vladimir Nabokov, “Lolita.”)	(786) 713-8616

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

ID _____	Name __________	Address Statement ______________________________________________________________________________________________________________	Phone _____
1	Cecilia Chapman	711-2880 Nulla St., Mankato Mississippi 96522. As he crossed toward the pharmacy at the corner he involuntarily turned his head because of a burst of light that had ricocheted from his temple, and saw, with that quick smile with which we greet a rainbow or a rose, a blindingly white parallelogram of sky being unloaded from the van—a dresser with mirrors across which, as across a cinema screen, passed a flawlessly clear reflection of boughs sliding and swaying not arboreally, but with a human vacillation, produced by the nature of those who were carrying this sky, these boughs, this gliding façade. (Vladimir Nabokov, “The Gift.”)	(257) 563-7401
2	Iris Watson	P.O. Box 283 8562 Fusce Rd., Frederick Nebraska 20620. On offering to help the blind man, the man who then stole his car, had not, at that precise moment, had any evil intention, quite the contrary, what he did was nothing more than obey those feelings of generosity and altruism which, as everyone knows, are the two best traits of human nature and to be found in much more hardened criminals than this one, a simple car-thief without any hope of advancing in his profession, exploited by the real owners of this enterprise, for it is they who take advantage of the needs of the poor. (Jose Saramago, “Blindness.”)	(372) 587-2335
3	Celeste Slater	606-3727 Ullamcorper. Street, Roseville NH 11523. My very photogenic mother died in a freak accident (picnic, lightning) when I was three, and, save for a pocket of warmth in the darkest past, nothing of her subsists within the hollows and dells of memory, over which, if you can still stand my style (I am writing under observation), the sun of my infancy had set: surely, you all know those redolent remnants of day suspended, with the midges, about some hedge in bloom or suddenly entered and traversed by the rambler, at the bottom of a hill, in the summer dusk; a furry warmth, golden midges. (Vladimir Nabokov, “Lolita.”)	(786) 713-8616

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

Answer 9

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.

Answer 10

What worked best for me is to use   (rather than normal spaces) between the words in table element content that should not be line-wrapped.

Unfortunately, composite words containing normal - symbols (typically used as hyphens) tend to be broken up anyway. Yet a workaround is to use instead the 'true minus' (−, Unicode 2212) symbol.

Answer 11

I did it using a simple blank character in title row, like this one: https://www.compart.com/en/unicode/U+2800

Look:

ID	Name⠀⠀⠀⠀⠀⠀	Address Statement	Phone⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
1	Cecilia Chapman	711-2880 Nulla St., Mankato Mississippi 96522. As he crossed toward the pharmacy at the corner he involuntarily turned his head because of a burst of light that had ricocheted from his temple, and saw, with that quick smile with which we greet a rainbow or a rose, a blindingly white parallelogram of sky being unloaded from the van—a dresser with mirrors across which, as across a cinema screen, passed a flawlessly clear reflection of boughs sliding and swaying not arboreally, but with a human vacillation, produced by the nature of those who were carrying this sky, these boughs, this gliding façade. (Vladimir Nabokov, “The Gift.”)	(257) 563-7401

Answer 12

This is my solution to spacing multiple images equally, and giving them captions. The heading row uses   characters.

|`                     `|`                      `|`                      `|
|:---:|:---:|:---:|
|![](1.png)<br>caption one |![](2.png)<br>caption two |![](3.png)<br>caption three |

Answer 13

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