Feature request: Table column width

[iegik]

So, we have columns, for example:

| Some | text | and number
| ---- | -------- | ----
| some | long text | 1
| awesome | another text | 1

Some	text	and number
some	long text	1
awesome	another text	1

Now, I need, that second column will be larger and last - smaller. Obviously, that we look at line that goes after headers: if shorter stroke - shorter column.

Solution:
So, count the dashes (with space and column separator) and use percentage width's by the ratio!
For example table { width:100%;} (Total: 24chars), <th style="width:29.17%"> (first column - 7chars), <th style="width:45.83%"> (second column - 11chars), and leve last without width's. http://jsfiddle.net/iegik/3D2Fb/

[aplib]

You can add a style with the selector element by number, for example:

<style>
table:nth-of-type(1) {
    display:table;
    width:100%;
}
table:nth-of-type(1) th:nth-of-type(2) {
    width:10%;
}
</style>

[iegik]

Not a solution. I have more then one table on the page.

[aplib]

table:nth-of-type(1) {

1 - number of the table
Indexing is from 1

[iegik]

I just wanted to

the Table 1:

| Column 1     | Column 2 |
| ------------ | -------- |

and Table 2:

| Column 1 | Column 2     |
| -------- | ------------ |

looked the same as they are in source - the same column width (proportionally).
And in HTML solution is to pass inline style attribute with "width" values in "%" to table headers:

<table>
    <thead>
        <tr>
            <th style="width:10%">
...

But leave last column without inline styles, so it will not break the layout:

<tr>                      <!-- 100% -->
    <th style="width:10%"><!--  10% --></th>
    <th style="width:50%"><!--  50% --></th>
    <th>                  <!--  40% --></th>
</tr>

[iegik]

Updated example: http://jsfiddle.net/iegik/3D2Fb/

[jondlm]

Most of the features you are requesting don't fit in well with the greater de facto markdown spec. I don't think they should be included in marked. This kind of stuff should really be done in a custom markdown extension, but I wouldn't call it markdown.

[ghost]

I agree with @jondlm . You should open a new repo for it. IMO, marked.js should be kept as lightweight as possible, being a good replacement of Showdown.js .(deleted)

Tables are really useful sometimes, I also want a Markdown variant to deal with that. :)

BTW, adding a number after the vertical bar may be better.

^2 Some ^3 text  ^5 and number
| some | long text | 1
| awesome | another text | 1

And you may like DokuWiki markdown syntax about tables: https://www.dokuwiki.org/wiki:syntax#tables It is more elegant, though no way to specify column width. (If you have made a markdown extension for this, I will be glad to head that.)

[iegik]

The main goal for Markdown is to keep all simple.
So, don`t think, that some numbers will make text beautiful!

KISS, I am trying to keep MD style using only "|" and "---" characters, that looks like simple lines. Inline style "width:**%" affects only relatively to the table and do not make BIG changes it visually. (aka layout staff)

^2 Some ^3 text  ^5 and number

— will not look like tables head, also "^" - usually means Exponentiation

| Some | text | and number |

— looks much better!

I`ll not to try change the holy Markdown, just want do represent it better!

[kuba-kubula]

This feature does not make sense, because it depends too much on viewport size of the browser, or exactly on the width of the whole table. And these things are not known to the parser, nor renderer. This should be achieved with client-side javascript. What else - if anyone uses css table-layout: fixed, it breaks immediately.

[crifan]

+1 expect can designated table column width, by dash count or something else

[joshbruce]

I'm with @kuba-kubula on this one, I think - also @ghost before deleting the first line.

1. Want to keep Marked light and out of the "template engine" business; adding attributes to the markup feel more like template engine (or CSS) business. (I don't know of a Markdown spec that allows for sizing of table columns.)
2. From a UX perspective mobile becomes an interesting problem space - especially if we're using percentages.
3. @jondlm also raises a good point regarding making an extension or override to handle the use case as it's not really markdown in the strictest sense. (Column spanning might be something worth pursuing - don't remember if the Multi-Markdown or CommonMark specs cover that.)

Going to leave this and PR open for now, but not feeling this as being a problem space to pursue solving with Marked (see #956).

[UziTech]

This is not part of any spec so it will have to be an extension

[maor-rozenfeld]

For anyone facing this issue, just use &nbsp-s (non breaking space) to extend the header of the column you want to make wider. You can copy it from here: " ". Make sure to add equal amount before and after the header text so it will stay centered.

Wide  Column	Short Column
1	Uh, sama lamaa duma lamaa you assuming I'm a human What I gotta do to get it through to you I'm superhuman Innovative and I'm made of rubber So that anything you say is ricocheting off of me and it'll glue to you I'm devastating, more than ever demonstrating
2	How to give a motherfuckin' audience a feeling like it's levitating Never fading, and I know that the haters are forever waiting For the day that they can say I fell off, they'd be celebrating 'Cause I know the way to get 'em motivated I make elevating music, you make elevator music

[iegik]

What if i want make short column, where header is wider?

I want make this column with that long text in header shorter then next column	Long column
1	2

[maor-rozenfeld]

You can add nbsps to the other columns, that's all I've got.

I want make this column with that long text in header shorter then next column	Long column
1	2

[jdgamble555]

For me I was able to get around this by adding:

| <div style="width:150px" /> Header Text | Some other header longer |

to the header column. I didn't put the div around the text, because for my app the SSR to Client hydration would rehydrate the inner text twice. This did the trick though.

J