Controlling the width of table columns

Help
, ,
1

Use case or problem

I would like my Markdown tables, when rendered, to set their column widths automatically based on the length of the text in that column. For instance, if I have two columns — Index and Note — and the Index column contains integers while the Note column contains a potentially long block of text, it would be great to see the table render automatically with a narrow Index column and a wide Note column. As it is, it appears that the width of any column is determined as follows: 100% / number_of_columns.

Proposed solution

I am not sure how this would be achieved.

Current workaround (optional)

I can manually edit the table HTML to add a column width property, but that is not retained when the page is saved.

It is entirely possible that I am missing something here. Would it make more sense for this to be a feature of the Advanced Tables plugin given that it requires examine the average width of each column?

Related feature requests (optional)

8 Likes
2

Advanced tables does exactly this.

3

I’m using Advanced Tables and it is definitely not doing this. Could there possibly be a conflict with another plug-in or with the theme I’m using (which is Obsidian Nord)? Here’s a screenshot.

  • Notice how both of the columns in the preview are the same width.
1 Like
4

Oh. I’m dumb. I missed the “when rendered” portion of your request. I don’t realize you were talking about preview mode. I don’t know how to do that but maybe it’s a feature the advanced tables dev can add?

5

No problem. Out of curiosity, what do you see when your tables render in preview? Do you see equal column widths, or do the column widths vary with the length of the data in each column?

6

Here (Obsidian 0.12.3 on Linux): All columns same width, wasting space that could better be used for columns with wider content.

1 Like
7

Yes, that is exactly how tables render for me too on Mac — all columns the same width. So, what am I missing? Seems to me that tables are fairly useless when all the columns are fixed to the same width.

1 Like
8

The Help Vault doesn’t expose this behaviour here.

Are you by any chance using @Lithou’s Image Flags Snippet?

In my vault, the snippet is called pub-Image Flags.css. This is what sets the table width to 100% and its layout to fixed, in my case.

Anyway, I’m working on a CSS snippet that will undo this change and make tables have self-adjusting column width again.

Link will be up here in a few moments, after testing.

EDIT: Here’s the link → Meta Post - Common CSS Hacks - #417 by Moonbase59

9

Mine vary based on content.

Example:
image

Windows & Android are the same.

10

That’s how it should be in default Obsidian, yes. It’s exactly like in the Help Vault.

Above solution is more for users of the Image Flags snippet and other code that might have messed things up. Or for those who want centered tables. :wink:

11

@Moonbase59 the answer is “yes!” I was using the Image Flags Snippet. Disabling it restores my columns to variable width. Thank you so much.

1 Like
12

Ha! So we both use the Image Flags snippet, and have nailed the cause of the problem—great.

On my system, I have left it enabled and used above linked CSS snippet, just because I wanted both functionalities: image enhancements plus normal tables. :slight_smile:

13

I can think of two ways:

1. Forcing those spaces via ` symbol:

|`          Title           `|`          Title          `|
|----|---------|
|`          Value1           `|`          Value2           `|

Ok, It’s not very elegant! :flushed:

2. Using HTML:

|<nobr>Title</nobr>|<nobr>Title</nobr>|
|----|---------|
|<nobr>Value</nobr>|<nobr>Value</nobr>|
2 Likes