#1

Hi!

I wanted some of my Obsidian tables to resemble Latex tables, so I got this CSS that kinda does the job. Mind you I’m new to Obsidian and this may not work for everyone, I’m no computer wizard.

Specify the CSS class on frontmatter for the note:

---
cssclass: academia
---

Use the following CSS snippet:

/* Latex table */
/* ------------------------------------*/
.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 !important;
	text-align: left;
	padding: 0.5rem;
	line-height: 1.1;
}
.academia tr:hover,
.academia td:hover {
	background-color: #cccccc;
}
.academia table > tbody > tr:first-child > td,
.academia table > tbody > tr:first-child > th {
	border-top: 1.36px solid black !important;
}
.academia table > tbody > tr:last-child > td,
.academia table > tbody > tr:last-child > th {
	border-bottom: 1.36px solid black !important;
}
.academia thead th {
    background-color: white !important;
    font-weight: 700;
}
.academia tr:nth-child(even) { background-color: #dddddd ; }
/* ------------------------------------*/

If you want no odd lines background color, just remove CSS last line!

A caption line is made using this line above the table markdown code:

<caption><b>Table 1.1</b> - A sample table with a descriptive caption.</caption>

The end result is quite similar:

fgrer

It’s just a cosmetic thing, I’m still lurking about on how to have some dynamic tables inside my notes (ie. embeded airtable views,) and I’m yet to explore how that Dataview plugin might automate things inside Obsidian, but this works fine to keep note tables visuals the Latex way.

3 Likes
#2

Wow, didn’t know this was possible. Thanks!

1 Like
#3

I tried it in the default theme with no other snippets enabled, but it does not work, unfortunately.

#4

If:

  • The css file is at the right location ([vault]/obsidian/snippets);
  • The snippet is activated under “CSS snippets” option
  • The CSS class is defined as specified above on the note frontmatter

I see no reason why it shouldn’t, as the CSS content above would apply to any table inside the note with that class parameter. Check these and let me know!

#5

Yep, it works. I had forgotten to fulfill the 3rd condition.
Many thanks.

1 Like
#6

it is really good looking table. thank you!
btw I wonder if there were any way I could apply dark mode variation so I could use white font color and different background colour. it really works great on light theme while the black font colour becomes invisible when I switch to dark mode. any idea, tip, or suggestion?

#7

For dark I changed the background colors as follows - see “PB changed” comments:

/* Latex table */

/* NOTE: PUT AT THE TOP OF THE OBS NOTE
css class: academia */

/* ------------------------------------*/
.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 !important;
	text-align: left;
	padding: 0.5rem;
	line-height: 1.1;
}
.academia tr:hover,
.academia td:hover {
	background-color: #393939; /* PB changed from #cccccc */
}
.academia table > tbody > tr:first-child > td,
.academia table > tbody > tr:first-child > th {
	border-top: 1.36px solid black !important;
}
.academia table > tbody > tr:last-child > td,
.academia table > tbody > tr:last-child > th {
	border-bottom: 1.36px solid black !important;
}
.academia thead th {
    background-color: grey !important; /* PB changed from white */
    font-weight: 700;
}
.academia tr:nth-child(even) { background-color: #2f2f2f ; } /* PB changed from #dddddd */
/* ------------------------------------*/
#8

I remember you also showed how to give the table rounded corners, but I cannot remember how, and I have not found it here. All I remember is to put in the YAML cssclass: academia, academia rounded.

Where can I find the CSS code to make that happen?

#9

You can find that code on this post > Custom CSS for tables - 5 New styles, ready to use in your notes - #3 by DeaconLight

:grinning: