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

• Waylan: Slate doesn't make any mention of such a feature in their docs and I'm not aware of any Markdown table implementation which offers such a feature. I would suggest raw HTML for that kind of control.
• jayarjo: HTML is perfect and there are generators as well all over the place. This one for example: tableconvert.com/?output=html
• wes: Note that this can be accomplished through RMarkdown by adding more parses to the wider column, as is described here: https://stackoverflow.com/questions/62982163/column-widths-in-markdown-tables-embedded-in-rmarkdown-documents

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.

• davnicwil: This should have many more upvotes! Much cleaner and more semantically correct than using an empty <img>, and works on github flavored markdown unlike the accepted answer
• tjebo: This is great! +1. It annoyingly did not work when creating the markdown document (GitHub flavour) with rmarkdown. (I am coding in R). I managed to get it done with a span element instead, but not without setting the display to "inline-block": <span style="display: inline-block; width:500px">text</span>
• Johann: Doesn't work for me.
• ripfreeworld: I'm afraid this so-called inline HTML only works locally
• Alexander Klimetschek: Does not seem to work in Github. Looks like they strip the html or at least the style.

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

• leopold: Note the whitespaces between the entities. It will not work without them:   &nbsp
• dldnh: Tried it with spaces between the entities, didn't look right, took out the spaces, worked perfectly.
• ESR: This actually seemed to just split the space onto two lines and didn't increase the width (on Github)
• L0laapk3: If youre fighting with tables that are bigger than the maximum width and you are trying to prevent breaking into multiple lines, use only   (no brake space) and no normal spaces.
• Paul Samsotha: to make the headers centered, add even amount of entities to both sides

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.

• fred271828: Ths is the only solution that worked for me. Plus, I put the empty <img> tags in the header, next to the column names, so as to avoid the creation of the blank row.
• jet_choong: The added <img/> appear as a white box with border, is there anyway to hide it?
• garethTheRed: Have you tried CSS - img { opacity: 0; }. You could maybe use CSS to hide the border too? I've not tired it though as it works without any CSS for my setup. I use BookStack, which I believe uses Markdown-It.
• Bryan K: The answer using the empty div tag is likely more appropriate than an <img /> element.
• John: <img width=INT> worked well for me too. <div style="width:INTpx"> did not work. I didn't even try  .

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

• Galz: This is the most elegant (no "invisible" images), and allows using % of total width. Nice!
• sun0727: But it seems like it will work for all the tables within an article (global). How can I apply different rules to different tables within one article (local)?
• wongoo: @sun0727 add a css class for it , ref stackoverflow.com/a/36215330/12073333
• TheMet4lGod: I like this option more than the excepted answer for a one-off solution, although the accepted answer is extensible to other pages in your site.

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!

• user5395338: @Pawel's answer is clever, but this answer is the correct one. I've just wasted 30 minutes of my life trying to get something that looks decent in a "Markdown Table", and it's hellish work.
• Virtua Creative: @Seamus fair point. I think the best way to do it, if you’re using Kramdown, is to add a custom class markup with {:.foo}. about.gitlab.com/handbook/product/technical-writing/…
• user5395338: That's an amazingly useful website, thanks! And so is kramdown! And here's a really helpful cheat sheet when only the HTML-ized table will do
• Unrelated: This lets you style the table but doesn't let you set the column width, other than equal column widths. Unless I'm missing a CSS property. We have table-layout: fixed for even widths – is there a way to set individual column widths?
• Johann: You should have explained where to place the css.

Answer 6

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.")	[phone]
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.")	[phone]
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.")	[phone]

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.")	[phone]
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.")	[phone]
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.")	[phone]

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

Answer 7

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 8

It's ridiculous but I ended up doing:

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

Forcing those spaces via ` symbol.

• jsta: Doesn't work if your header is a link.
• theerrormagnet: This works and looks cleaner in the code than the other solutions. I used this for a gitlab markdown file.
• Hofi: if you have a different style set up for inline code blocks that does not match your desired table heading style this will look wired

Answer 9

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.")	[phone]

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

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 12

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>

enter image description here

---

So I overrode that style attribute with CSS:

table colgroup col {
 width: auto !important;
}

enter image description here

Now it behaves as expected.

Answer 13

The number of dashes for defining the horizontal line can be used to control column width. Use at least as many as the longest cell in the column to avoid line breaks.

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

• Nyerguds: The dashes on the second line have no influence on the table. A single dash has the same effect as a hundred of them. They just serve to separate the headers from the values.

Answer 14

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

See the table code screenshot