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.
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
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
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
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
For a sample table using the above settings, see Obsidian CSS table helpers
The easiest way to add the classes to your vault is using the BRAT Obsidian plugin to install the Snippet Downloader Obsidian plugin) and then add this repository URL 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.
Follow the instructions at CSS snippets - Obsidian Help for installing the CSS found at https://github.com/quantumgardener/obsidian-table-format-classes.