Skip to content

A set of classes to help with table formatting in Obsidian. Set values by column for width, alignment, bold and nowrap, etc.

Notifications You must be signed in to change notification settings

quantumgardener/obsidian-table-format-classes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

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

For a sample table using the above settings, see Obsidian CSS table helpers

Installing into your vault

Automated inclusion and updates

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.

  1. Install BRAT from the Obsidian community plugins repository
  2. Add https://github.com/Mara-Li/obsidian-snippet-downloader to BRAT's beta plugin list
  3. Enable the newly installed Snippet Downloader plugin
  4. 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.

About

A set of classes to help with table formatting in Obsidian. Set values by column for width, alignment, bold and nowrap, etc.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published