Custom CSS for tables - 5 New styles, ready to use in your notes

[DeaconLight]

Hi there!!

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:

The 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

The class 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 hack.

• 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 fixedFc hack.

• customMargin- If you need some extra space between tables and your content, just call this guy.

---

Steps to use these tables:

1. Put the attached CSS file into your vault snippets folder and make sure to enable it in your preferences > CSS Snipets option.

2. In a note, use the frontmatter cssclass code with the chosen table/hacks:

---
   cssclass: purpleRed, wideTable, fixedFc
---

3. Nothing else, that’s it

---

tableStyles.css (8.4 KB)

Tables.zip (3.4 KB)

The 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!

Reminder:
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.

[Klaas]

Is it possible to have the Latex style with rounded corners?

[DeaconLight]

Rounded modes can be quite annoying to fine tune but that was not the case for the Latex one. I literally just copied the White red rounded parts of the code to the academia class. The updated Latex like code looks like this:

    /* --------------------------------------------   */
    /* Latex table-layout:                            */
    /* --------------------------------------------   */
    .academia table {
    	border-collapse: collapse;
    	border-spacing: 0;
    	width: auto;
    	/*max-width: 100%;*/
    	border-top: 2.27px solid black;
    	border-bottom: 2.27px solid black;
    	overflow-x: auto;	
    	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }
    .academia th,
    .academia td {
    	border: 0 none;
    	padding: 0.51rem;
    	line-height: 1.1;
    }
    .academia table > tbody > tr:first-child > td,
    .academia table > tbody > tr:first-child > th {
    	border-top: 1.36px solid black;
    }
    .academia table > tbody > tr:last-child > td,
    .academia table > tbody > tr:last-child > th {
    	border-bottom: 1.36px solid black;
    }
    .academia thead th {
        background-color: white !important;
        font-weight: 700;    
        padding: 8px 9px 8px 9px;
        font-size: 0.9em;
    }
    .academia tr:nth-child(even) {
          background-color: #ebecf1 ;
    }
    .academia tbody tr:hover td {
    	background-color: #f5f1da;
    }
    /* --------------------------------------------   */
    .academia-rounded table {
        border-collapse: separate;
        border: solid #b3b3b3 1px;
        border-radius: 6px;
        border-spacing: 0px;
    }
    .academia-rounded table > tbody > tr > td {
    	border-bottom: 1px solid #ccccccbb;
    }
    .academia-rounded table > tbody > tr:last-child > td {
    	border-bottom: thin #ccccccbb;
    }
    .academia-rounded table th:first-of-type{
    	border-top-left-radius: 6px;
    }
    .academia-rounded table th:last-of-type{
    	border-top-right-radius: 6px;
    }
    .academia-rounded table tr:last-child td:first-child {
        border-bottom-left-radius: 5px;
    }
    .academia-rounded table tr:last-child td:last-child {
        border-bottom-right-radius: 5px;
    }
    /* --------------------------------------------   */

The rounded class is stackable so this is the front matter:

---
cssclass: academia, academia-rounded
---

And you should have it with rounded edges:

[Klaas]

Thank you !!

[FiekeB]

Hi @DeaconLight

I wanted to create an official looking food label in Obsidian, with just markdown tables. Had no idea where to start because I didn’t know what selectors there are for markdown tables. Then I stumbled upon this post of yours and I downloaded your files.

I could not have pulled this off without your well documented css file and examples. I adapted your yellowCab css extensively to re-create the original foodlabel I found as an image. I think I did a pretty good job, thanks to your examples.

I just used another font than the real label does. I don’t like Arial etc and use Avenir Next in my entire vault. But if someone wanted to, they could of course adapt the CSS and use another font.

I’ll attach my adapted CSS and the the 07 - Nutrition Facts.md file plus the foodlabel photo and a screenshot of my pure Markdown table + CSS Nutrition Facts FoodLabel.

Kind regards,

Fieke

Attachments:

nutFact_tableStyles.css (9.2 KB)

07 - Nutrition Facts.md (1.6 KB)

This is a picture of a real FoodLabel

This is a screenshot of my pure Markdown Table & CSS FoodLabel

[DeaconLight]

Hello @FiekeB

This was an impressive work, it really looks perfect and well made, very proud I could help a little on this. The Avenir Next font looks really good, it’s the first time I notice it and I really like it, might even use it here.

Thank you for sharing this and the code, really good work!! Cheers

[FiekeB]

Hey @DeaconLight, Avenir Next isn’t a free font as far as I know, I think it comes with Apple products like MacBook etc, but Montserrat is almost identical and a Google Font!

Thought I’d tell you in case you have no access to Avenir Next

PS Thanks for your compliments, makes me feel proud ! (it took me 2 days to figure it all out, haha!)

[DeaconLight]

@FiekeB can you believe I work on Macs for as long as I remember and never looked twice at this font? Thank you for the suggestion of an alternative as well, really thoughtful, I appreciate it. And god, only 2 days is amazing, looks just as the original! Cheers!!

[afaour]

Great work - thank you for sharing. Is it possible to modify fixedFc so that all the columns avoid double lines by using “…”? At the moment only the second column does that. Thank you.

[73pctGeek]

Thank you so much for this, it’s great!

[alexj]

Wow, nice style.

btw, can it auto adapt to dark or light theme?

[Moihaha]

Hi, new Obsidian user and non-tech savvy person here!
Those snippets look great, but are they compatible with both light and dark theme, and with Advanced Tables by tgrosinger?
I can’t seem to make them work and am not sure what I did wrong.

[distracted]

I originally replied and said I had to convert the markdown to HTML, but then I remembered that I am using a version of Obsidian (on PC) that allows for some preview within edit mode. Sorry, I don’t know how to better describe that feature.

Anyway, I saw the table render correctly after selecting the eyeglass icon in the Obsidian UI which displayed the entire file in preview/reading mode. The css will be applied to an HTML table without switching to the reading-only mode.

And much much much thanks to DeaconLight for the time and effort put into creating the files and making them available. Cheers!

[jumbo_jing]

@FiekeB The screenshot of md table &css foodLabel has not the foot note as its above picture. Howto add the foot note in md?

[knight]

@DeaconLight

frontmatter cssclass code

If I want it to be my default style without writing frontmatter cssclass code, how do I set it

[metawops]

Hey, this is great! I’m just digging this cssclass thingy and diving deeper into the Dataview plugin and the tables it can produce.
I downloaded your CSS file and added the cssclass entry in the front matter and it worked immediately on the Dataview tables – great!
However, … when I tried the whiteRed style I got another font rendered than in your screenshots here. A quick look with the Developer Tools revealed that you’re using Lato-Bold – which is not installed on my Macs.
Just wanted to drop this note fyi. I’m now going to modify the CSS to use a non-serif font every Mac has (like SF Pro or SF Compact or Helvetica Neue).
Where does this Lato-Bold font come from? Is it free? Can I download it somewhere?

Thanks so much for your work, learned a lot from it!

[FiekeB]

I suppose that’s just a matter of adding in another row and putting it there. But it’s been a while since I created this and I am just back to using Obsidian again after a very long break due to personal matters in my life. I have to pretty much start all over again to use my brain again in a more beta way of thinking. I can do that, but it isn’t something that comes naturally to me. It requires a lot of my mental energy and that was exactly what made me stop using Obsidian. I wanted to do too much with it and then stuff happened in my life and I just couldn’t handle all of it anymore.That’s life. It just throws sh*t at you whenever it wants to

I will take a quick look.

I just add another row and added the text in and added a * after % Daily Values to indicate that there is indeed a footnote. That’s it. The only thing is that the text has the same size as the rest of the default text on the foodlabel. I didn’t get around to making an extra css-class for that yet. But you can probably manage that yourself.

[FiekeB]

Hey @DeaconLight, I stumbled upon a flaw in my foodlabel…it has no max-width and it should have that. It should have a max-width of 385px. And no matter what CSS I try - it just doesn’t “stick”. And it really looks ridiculous to have a 1000px wide foodlabel as soon as you move around the sidebars in Obsidian.

Could you please tell me what CSS I should use to make it so? Thanks in advance

The original CSS (without a max-width) is in this post

[Asta]

They work fine with dark theme on my end!

Otherwise, I’m in the same boat as you - I’d really like to use this with Advanced Tables, but it doesn’t seem to work. Really a shame if they’re incompatible, I just got used to creating tables so much more easily than the default way.

[Nitroshi]

Doesn’t work