[FEATURE]: Additional Markdown table syntax for explicit column widths

[Gazook89]

Would like to have an easy method of setting the column widths in tables, outside of targeting each column separately via css and setting the width property.

Here is how I would do this with CSS currently, using variables at the Table level in anticipation of v3 "Curly Injection" syntax being usable by tables:

Click to Expand

```html | Head A | H B | H C | |:-------|:----|:----| | 1A | 1B | 1C | | 2A | 2B | 2C | | 3A ^| 3B 3C || | 4A | 4B 4C^|| | 5A ^| 5B | 5C | | 6A | 6B ^| 6C | ```

In my mind, this could simplified to:

|:---80px----|:--70%--|:-------|

Related Threads

I feel like I have seen this come up regularly on the subreddit (and have once made a guide on how to do it with CSS), but wanted to do a quick reddit search and see exactly how often.

Click to Expand

* [Github Jul 17 2017](#444) * [Reddit May 23 2018](https://old.reddit.com/r/homebrewery/comments/8lh0fr/increasing_the_number_of_pixels_between_columns/) * [Reddit May 27 2019](https://old.reddit.com/r/homebrewery/comments/bts83z/question_how_do_i_manually_adjust_the_column/) * [Reddit Jun 8 2020](https://old.reddit.com/r/homebrewery/comments/gyx0f5/this_might_be_a_bit_of_a_stupid_question_but_how/) * [Reddit Aug 26 2020](https://old.reddit.com/r/homebrewery/comments/igubip/help_creating_specifically_aligned_tables/) * [Reddit Nov 15 2020](https://old.reddit.com/r/homebrewery/comments/julc6m/im_new_to_this_and_need_help_keeping_my_table/) * [Reddit Dec 29 2020](https://old.reddit.com/r/homebrewery/comments/kmill3/fix_table_sizing/) * [Reddit Jan 30 2021](https://old.reddit.com/r/homebrewery/comments/l8b6up/adjusting_column_widths/) * [Reddit Mar 24 2021](https://old.reddit.com/r/homebrewery/comments/mcg6cn/issue_table_column_not_wide_enough_or_too_wide/) * [Reddit Apr 25 2021](https://old.reddit.com/r/homebrewery/comments/my727g/table_column_sizes/) * [Reddit May 25 2021](https://old.reddit.com/r/homebrewery/comments/nkqvw2/table_help_please/) * [Reddit Jul. 1 2021](https://old.reddit.com/r/homebrewery/comments/obxfhk/how_to_properly_space_table_headers/) * [Reddit Aug. 3 2021](https://www.reddit.com/r/homebrewery/comments/oxdnwk/hi_its_my_first_post_here_and_i_have_a_question/) * etc

[Gazook89]

Identical request and proposed syntax on reddit just now.

[calculuschild]

What would you think about just a single number that represents the portion of the total width, similar to flex-grow?

For example, say we have 8 columns. Then if we put |:--1--:|, that column is now forced to exactly 1/8 of the width (assume any unmarked column counts as 1 for calculating the total, but let width be auto-distributed in those cases)

|:--1--:|:-----:|:-----:|--3--:|:--2--:| would be counted as a total width of 8 "units", with each column taking the appropriate fraction, with the following spaces:

12.5% auto auto 37.5% 25%

This would be quite a bit easier to program, takes up less space since you just use one or two digits. But it's not as direct as explicitly typing out a percentage.

Alternatively, what do you think about only supporting percentages (not px, etc) to start? Limiting the number of things people can use will make programming a first version of this much easier. |:-10%-:|

[Gazook89]

I'm okay with just a single number, no unit--- essentially, it is CSS Grid's fr/"fraction" unit. I think this leaves the door open for future implementation of exact units (px, in, cm) either by Homebrewery or upstream in Marked.js (though after some reading through Marked.js Issues it seems as if this won't happen until the Markdown standard implements it).

Using just fractions means not having to worry about columns that are wider than the table itself, or percentages larger than 100%. So that's nice.

I'm sure I don't need to say it, but this should be a post-v3 launch feature since it would be a non-breaking change.

[calculuschild]

Yeah, Marked.js is only implementing standardized CommonMark features. Anything else we've had to do custom. This is one of the reasons why I joined the Marked project so I could have influence over the way custom extensions are handled.

[ericscheid]

Just to muddy the waters, here's a use case of setting the first columns of multiple tables to the same width (for aesthetic reasons). Note how the different tables have different numbers of columns..

https://homebrewery.naturalcrit.com/share/BkOxJ6jaN

I achieved this through .page#p1 table thead th:nth-of-type(1) { width: 10em; } .. which in hindsight is still preferable as it is one number I can change to affect multiple tables (i.e. don't have to edit multiple tables).

In this particular use case each of the tables with full width, but I can imagine having a split table in the mix where I'd want to match width of the first column to the full width columns too .. which makes a proportional approach very difficult.

CSS is always available for difficult cases, of course.

[calculuschild]

@ericscheid Hmm... I hadn't considered this case of syncing between separate tables of different widths. Between same-width tables proportional would work, but you are right that is a good argument for absolute widths. Might be a later improvement down the line if I can get percentage :-20%-: working first.

[Gazook89]

So spent some time screwing with the extended-markdown-tables extension and hit a roadblock when I started thinking about how this works with column-spanning.

Unlike in a spreadsheet program where the columns always exist outside of a table, and thus can be given widths even if there are no single-column cells, an html table doesn't have that 'outside context'. If there are no single-column cells in an HTML table, how do you assign a width?

|  Header      ||
|-20px--|----|
| cell             ||
| cell             ||

Then I was wondering how does this work with alignment?

I dunno, have to come back to this.