The table creation by using the markdown text is easily and very convenient. However it’s difficult that change to specific size the column width of automatically rendered table.

That has been discussed as below in the stack oveflow as well.

https://stackoverflow.com/questions/36121672/set-table-column-width-via-markdown

Unfortunately for me however I felt that none of the methods were smart.

Change column width of markdown table

Technique to change column width of markdown table

I came up with a good idea that technique to as easily as possible and arbitrarily change the column width of the table created by markdown.

Note that, in order to use the technique I thought, only when it is possible to load JavaScript for extension on the HTML where markdown was converted.

For example, suppose it wrote as follows a table by markdown text:

| Name | Type | Default | Description |
|------|------|---------|-------------|
| **Lorem ipsum** | dolor | `sit amet` | Sea id modo dicta tamquam, ei prima iudicabit ius. |
| **Nusquam** | conceptam | `at eam` | Qui equidem sententiae te. Est oratio dolore no, et duo soluta bonorum prodesset. |
| **Cu vero aliquam** | inciderint | `est` | Erat lucilius ne duo, eum odio qualisque an. Ei alii omittam molestiae ius. Alienum percipit no eum. Eos nulla viris oportere no, vel primis facilisis ut, sed cu voluptaria consectetuer. |

There is displayed as follows after converting via markdown.

Name Type Default Description
Lorem ipsum dolor sit amet Sea id modo dicta tamquam, ei prima iudicabit ius.
Nusquam conceptam at eam Qui equidem sententiae te. Est oratio dolore no, et duo soluta bonorum prodesset.
Cu vero aliquam inciderint est Erat lucilius ne duo, eum odio qualisque an. Ei alii omittam molestiae ius. Alienum percipit no eum. Eos nulla viris oportere no, vel primis facilisis ut, sed cu voluptaria consectetuer.

Then let’s try to specify the column width so that column values ​​of “Name” and “Default” ​​will not be word broken.

<div class="table-define" data-sizes="15rem,auto,10rem,auto"></div>

| Name | Type | Default | Description |
|------|------|---------|-------------|
| **Lorem ipsum** | dolor | `sit amet` | Sea id modo dicta tamquam, ei prima iudicabit ius. |
| **Nusquam** | conceptam | `at eam` | Qui equidem sententiae te. Est oratio dolore no, et duo soluta bonorum prodesset. |
| **Cu vero aliquam** | inciderint | `est` | Erat lucilius ne duo, eum odio qualisque an. Ei alii omittam molestiae ius. Alienum percipit no eum. Eos nulla viris oportere no, vel primis facilisis ut, sed cu voluptaria consectetuer. |

Insert the div tag that has the .table-define class just before the markdown text of the table. Then specify the width of each column in the data-sizes attribute of this div tag.
In this example, the maximum number of characters in the column whose width is to be fixed is specified in rem unit.
When this table is converted via markdown, it is displayed as follows.

Name Type Default Description
Lorem ipsum dolor sit amet Sea id modo dicta tamquam, ei prima iudicabit ius.
Nusquam conceptam at eam Qui equidem sententiae te. Est oratio dolore no, et duo soluta bonorum prodesset.
Cu vero aliquam inciderint est Erat lucilius ne duo, eum odio qualisque an. Ei alii omittam molestiae ius. Alienum percipit no eum. Eos nulla viris oportere no, vel primis facilisis ut, sed cu voluptaria consectetuer.

In addition, you can specify as a breakpoint the minimum width to change this column width. If specified, if the width of the parent element of the markdown table is less than this breakpoint, the column width change will not occur.

<div class="table-define" data-sizes="15rem,auto,10rem,auto" data-min-width="380"></div>

Required JavaScript

In order to activate the above div.table-define, the following JavaScript is required.

Firstly, jQuery version:

$('.table-define').each(function(){
    let sizes    = $(this).attr('data-sizes').split(','),
        minWidth = $(this).attr('data-min-width') ? parseInt( $(this).attr('data-min-width') ) : 0,
        $table   = $(this).next('table'),
        containerWidth = $table.parent().width()

    if ( $table && containerWidth >= minWidth ) {
        sizes.forEach( (size, i) => {
            $table.find('th').eq(i).css('width', size)
        })
    }
})

And native javascript version:

document.querySelectorAll('.table-define').forEach((elem) => {
    let sizes    = elem.getAttribute('data-sizes').split(','),
        minWidth = parseInt( elem.getAttribute('data-min-width') ) || 0,
        table    = elem.nextElementSibling,
        containerWidth = elem.parentNode.clientWidth

    if ( table && containerWidth >= minWidth ) {
        sizes.forEach( (size, i) => {
            table.getElementsByTagName('th')[i].style.width = size
        })
    }
})

By extending the attributes that can be set for div.table-define, it will be possible to color to the specific column, change to “th” the leftmost column of each row as well and so on.