Sharing one more time my personal table styles but this time I got them all into one single css file with 5 table visuals and a few hacks that enable further customization:
White red table has an extra mode that you can use to get it with rounded corners, all you gotta do is stack both classes:
cssclass: whiteRed, whiteRed-rounded, wideTable
wideTable draws the table 100%, so it takes your notes width by default. The use of these hacks is up to your personal choices, they are unrelated to main tables CSS, but can be stacked with them as shown above.
Other “hack” classes are:
leftAlign- Some themes use RTL in tables, this brings the content back to the left;
fixedFc- Fixes the first column width and avoids double lines by using “…” in long texts. Useful when your first column is a date or some other short text. Not to be used with the
wideFc- For big texts in the first column, but you also want single lines, so this hack appends ellipsis to long texts in this column. I find it great for general notes list, particularly with the Dataview plugin that uses the file name as first column. Not to be used with the
customMargin- If you need some extra space between tables and your content, just call this guy.
Steps to use these tables:
Put the attached CSS file into your vault snippets folder and make sure to enable it in your preferences > CSS Snipets option.
In a note, use the frontmatter cssclass code with the chosen table/hacks:
--- cssclass: purpleRed, wideTable, fixedFc ---
- Nothing else, that’s it
tableStyles.css (8.4 KB)
Tables.zip (3.4 KB)
tables.zip file contains the .md files used in the screenshots. Just drop the folder in your vault and you should have a showcase of each table style!
Table visuals might change given your Obsidian theme/OS fonts. In the CSS file there are some examples of custom fonts being used, these should point you in the right direction to get same results as here.