HowTo: Fixed column width in table

[a_wue]

Problem:

In my Persons-note I have a table for each letter in the alphabet (some letters share a table, like C-D). The columns of the different tables (Name and Description) have different widths assigned automatically: e.g. in one table colum Name is wider than in the next table.

There are some thoughts on this problem in Controlling the width of table columns - Help - Obsidian Forum, but either they don’t look good or they work only in edit- or reading-mode. Since I almost never use reading-mode, it was important for me to have a solution that works in every mode.

I tried to solve it via CSS, but I don’t know CSS very well, and I didn’t find a solution to copy.

Solution:

The solution I found may not be very professional, but it works. I added invisible characters to the title. There are different invisible Unicode characters I tried, but Obsidian obviously collapses some of them. Character U+3000 doesn’t collapse when you put it behind your headers.

You have to test how often you have to insert the character after Name and Description so that it looks good. Since my table headers are identical (Name and Description), I only had to write it once and copied it into all the other tables.

You can copy the U+3000 here: “ ” U+3000 Ideographic Space Unicode Character (compart.com). Just select the white box at the top of the page and copy it into your table header.

Maybe this will help someone.

[CarolineMathieson]

Whle it’s a good solution, I guess my only reservation about this is if you then look at the note outside of obsidian it may or may not look very nice depending on what you use to view it.

[a_wue]

Yes, you are totally right. My main focus though is Obsidian, and for me it’s very important that my working environment looks good . A series of tables, for example, which do not fit together, actually distract me from my actual work .

[Jopp]

A better solution is fixed column width

[Gerqus]

Sorry for bringing up an old topic, but this is first result in google and proposed solution does not really do the trick for me.
Now with newer versions of CSS and Electron we can utilise the following styles to style tables depending on their column count:

/* two column table */
/* first column size */
table:has(th:first-of-type + th:last-of-type) th:nth-of-type(1) {
  width: 15rem;
}

/* three column table */
/* first column size */
table:has(th:first-of-type + th + th:last-of-type) th:nth-of-type(1) {
  width: 10rem;
}
/* second column size */
table:has(th:first-of-type + th + th:last-of-type) th:nth-of-type(2) {
  width: 15rem;
}

/* four column table */
table:has(th:first-of-type + th + th + th:last-of-type)
...

So to match table with N columns, we need to write table:has(th:first-of-type + th + th + th:last-of-type), where th in selector should be repeated N times. Please note that first and last th must have :first-of-type and :last-of-type pseudo-selectors.
To style particular column modify the second part of selector: th:nth-of-type(x) where x is the number of the column

Mind that the css above selects only the cells in table header and sets their style. As long as it’s width, other cells in the column will follow. To style column with colour or font or other, add same selectors but using td instead of th in second part (td:nth-of-type(x)) - td will select all non-header cells (here in x-th column)
So by combining th and td selectors we can style whole column with any style.

To style column regardless of tables column count use for header cells: table th:nth-of-type(x) and for non-header cells table td:nth-of-type(x), just like that.

Results:
Basic style:

Styled by column:

Enjoy your constant width and style columns selected by columns count!