Obsidian does not have the greatest options for forcing table formatting but because each page is rendered HTML we can take advantage of the special cssclasses property to override formatting when we need to. Both the Live Preview editor and Reading modes need to be considered.
The core of this solution was originally developed for The Quantum Garden Website where I forced column widths to avoid wrapping, then I came across Graceful page widening in Obsidian and was subsequently recommended No-Wrap Specific Columns in Obsidian. Most of my column fixing options can likely be overcome by a nowrap solution but that’s not always the case.
Although I had created CSS for The Quantum Garden Website I never thought to apply it to The Quantum Garden Vault. Here is that solution, simplified and expanded.
Please note
Applying a table based CSS class will apply that class to all tables on a page.
Combinations of classes will follow the CSS standards for collisions.
Available classes
Column width
Set the column width to a specified value.
Add a class to cssclasses property using the form:
c[n]-[width]
where
n is 1–7
width is one of 20, 50, 75, 100, 125, 150, 200, 250, 275, 300, 350, 400
There is a shortcut to follow the last column:
clast-[width]
where
n is 1–7
width is one of 20, 50, 75, 100, 125, 150, 200, 250, 275, 300, 350, 400
For example, to set the width of column 1 to 100px and the last column to 300 use:
cssclasses:
- c1-100
- clast-300
Alignment
Obsidian does provide the ability to set alignment in the app as it’s part of the Markdown standard for tables. But, if you need to force something there are center and right alignment classes. I also use centre because I’m Australian and that’s the way I spell.
Add a class to cssclasses property using the form:
c[n]-[alignment]
where
n is 1–7
alignment is one of left, center, centre, right
There is a shortcut to follow the last column:
clast-[alignment]
where
n is 1–7
alignment is one of left, center, centre, right
For example, to right-align column 2 and centre the last column use:
cssclasses:
- c2-right
- clast-centre
Bold
Set table cells to bold. Very useful for the first column.
Add a class to cssclasses property using the form:
c[n]-bold
where
n is 1–7
There is a shortcut to follow the last column:
clast-bold
where
n is 1–7
For example, to bold column 4 use:
cssclasses:
- c4-bold
Nowrap
Set table cells to nowrap. Very useful for those columns where text length is small, but varies just enough.
Add a class to cssclasses property using the form:
c[n]-nowrap
where
n is 1–7
There is a shortcut to follow the last column:
clast-nowrap
where
n is 1–7
For example, to force column 3 to not wrap use:
cssclasses:
- c3-nowrap
Sample table
The sample table below uses the example options from above.
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 (last) |
|---|---|---|---|---|
| Column 1 set to width 100 | Right aligned | Nothing to see here | Bold as brass | Last column set to width 300, centered |
Installing into your vault
Automated inclusion and updates
The easiest way to add the classes to your vault is using the BRAT plugin to install the Snippet Downloader plugin and then add https://github.com/quantumgardener/obsidian-table-format-classes as a repository of styles. It’s a couple of simple steps for anyone familiar with Obsidian plugins and is the quickest way to get updates when styles are tweaked or added. It’s what I use myself.
- Install BRAT from the Obsidian community plugins repository
- Add https://github.com/Mara-Li/obsidian-snippet-downloader to BRAT’s beta plugin list
- Enable the newly installed Snippet Downloader plugin
- Add https://github.com/quantumgardener/obsidian-table-format-classes to the Snippet Downloader’s list of CSS to retrieve
The CSS should then automatically activate in your vault.
Manual installation
Follow the instructions at CSS snippets - Obsidian Help for installing the CSS found at https://github.com/quantumgardener/obsidian-table-format-classes.