# Custom CSS for tables - 5 New styles, ready to use in your notes **URL:** \ **Category:** Themes & CSS snippets\ **Tags:** custom-css\ **Created:** [April 23, 2021, 10:47pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084 "2021-04-23T22:47:43Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![DeaconLight](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/3e96dc/32.png) [@DeaconLight](https://forum.obsidian.md/u/DeaconLight)\ **Post date:** [April 23, 2021, 10:47pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/1 "2021-04-23T22:47:43Z")
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: ![scTables1](https://forum.obsidian.md/uploads/default/original/2X/2/2a323ac1ae04363c67a3888ae1017048e61a358c.png) ![scTables2](https://forum.obsidian.md/uploads/default/original/2X/3/3698b05ba1686f75edd818d83ee8004521f7b97f.png) ![scTables3](https://forum.obsidian.md/uploads/default/original/2X/4/496148820a573990ba86cdde2787626b646635db.png) ![scTables4](https://forum.obsidian.md/uploads/default/original/2X/8/89b4baf17cd86e43df53f4b267b156f12bb78dec.png) ![scTables5](https://forum.obsidian.md/uploads/default/original/2X/5/5450179846690297d479cd1334fb99982af366f5.png) 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` ![ct1](https://forum.obsidian.md/uploads/default/original/2X/8/8966ab854b8c103e23c8a532b0e4bd16453692e5.png) 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: ```auto --- cssclass: purpleRed, wideTable, fixedFc --- ``` 1. Nothing else, that’s it 🥳 * * * [tableStyles.css](https://forum.obsidian.md/uploads/short-url/apLA1vTgnUpAWBgZweMTSQcYqvN.css) (8.4 KB) [Tables.zip](https://forum.obsidian.md/uploads/short-url/ep7UtAto3o2ry4qcgmbqHdTjAow.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. ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [April 24, 2021, 9:32am UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/2 "2021-04-24T09:32:54Z")
Is it possible to have the Latex style with rounded corners? ---
**Author:** ![DeaconLight](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/3e96dc/32.png) [@DeaconLight](https://forum.obsidian.md/u/DeaconLight)\ **Post date:** [April 24, 2021, 1:12pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/3 "2021-04-24T13:12:29Z")
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: ```auto /* -------------------------------------------- */ /* 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: ![5hhhh](https://forum.obsidian.md/uploads/default/original/2X/0/016addd9a0502c3a5116eb43e2b2cad8392eec7a.png) ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [April 24, 2021, 4:22pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/4 "2021-04-24T16:22:41Z")
Thank you !! ---
**Author:** ![FiekeB](https://forum.obsidian.md/user_avatar/forum.obsidian.md/fiekeb/32/15042_2.png) [@FiekeB](https://forum.obsidian.md/u/FiekeB)\ **Post date:** [June 16, 2021, 8:45pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/6 "2021-06-16T20:45:10Z")
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](https://forum.obsidian.md/uploads/short-url/z2oH4683ODgNTjtPtaHwNFUxijL.css) (9.2 KB) [07 - Nutrition Facts.md](https://forum.obsidian.md/uploads/short-url/cRD2mMxCJWURSPpl2paoTyau49Z.md) (1.6 KB) ![FoodLabel](https://forum.obsidian.md/uploads/default/original/3X/a/c/ac3775b63fd1778779bfdc0e3b3494934cc3f26b.png) This is a picture of a real FoodLabel ![FoodLabel-PureMarkdown-and-CSS-Screenshot](https://forum.obsidian.md/uploads/default/original/3X/4/3/435c2957ff8c37f97b90e7028ed8e8cf88f164ff.png) This is a screenshot of my pure Markdown Table & CSS FoodLabel ---
**Author:** ![DeaconLight](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/3e96dc/32.png) [@DeaconLight](https://forum.obsidian.md/u/DeaconLight)\ **Post date:** [June 18, 2021, 12:57pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/7 "2021-06-18T12:57:54Z")
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 ---
**Author:** ![FiekeB](https://forum.obsidian.md/user_avatar/forum.obsidian.md/fiekeb/32/15042_2.png) [@FiekeB](https://forum.obsidian.md/u/FiekeB)\ **Post date:** [June 18, 2021, 2:43pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/8 "2021-06-18T14:43:09Z")
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](https://fonts.google.com/specimen/Montserrat#standard-styles) 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!) ---
**Author:** ![DeaconLight](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/3e96dc/32.png) [@DeaconLight](https://forum.obsidian.md/u/DeaconLight)\ **Post date:** [June 18, 2021, 7:08pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/9 "2021-06-18T19:08:58Z")
@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!! ---
**Author:** ![afaour](https://forum.obsidian.md/user_avatar/forum.obsidian.md/afaour/32/17158_2.png) [@afaour](https://forum.obsidian.md/u/afaour)\ **Post date:** [July 14, 2021, 11:24pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/10 "2021-07-14T23:24:56Z")
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. ---
**Author:** ![73pctGeek](https://forum.obsidian.md/user_avatar/forum.obsidian.md/73pctgeek/32/54146_2.png) [@73pctGeek](https://forum.obsidian.md/u/73pctGeek)\ **Post date:** [August 24, 2021, 12:52pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/11 "2021-08-24T12:52:49Z")
Thank you so much for this, it’s great! ---
**Author:** ![alexj](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/c89c15/32.png) [@alexj](https://forum.obsidian.md/u/alexj)\ **Post date:** [January 14, 2022, 2:59am UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/12 "2022-01-14T02:59:51Z")
Wow, nice style. btw, can it auto adapt to dark or light theme? ---
**Author:** ![Moihaha](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/m/cc9497/32.png) [@Moihaha](https://forum.obsidian.md/u/Moihaha)\ **Post date:** [January 15, 2022, 6:37pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/13 "2022-01-15T18:37:45Z")
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. ---
**Author:** ![distracted](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/d/a6a055/32.png) [@distracted](https://forum.obsidian.md/u/distracted)\ **Post date:** [January 30, 2022, 11:07am UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/15 "2022-01-30T11:07:10Z")
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! ---
**Author:** ![jumbo\_jing](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/j/34f0e0/32.png) [@jumbo\_jing](https://forum.obsidian.md/u/jumbo_jing)\ **Post date:** [February 4, 2022, 1:45am UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/16 "2022-02-04T01:45:14Z")
@FiekeB The screenshot of md table &css foodLabel has not the foot note as its above picture. Howto add the foot note in md? ---
**Author:** ![knight](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/2bfe46/32.png) [@knight](https://forum.obsidian.md/u/knight)\ **Post date:** [February 21, 2022, 12:41pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/17 "2022-02-21T12:41:59Z")
> [@DeaconLight](#): > > frontmatter cssclass code If I want it to be my default style without writing frontmatter cssclass code, how do I set it ---
**Author:** ![metawops](https://forum.obsidian.md/user_avatar/forum.obsidian.md/metawops/32/27031_2.png) [@metawops](https://forum.obsidian.md/u/metawops)\ **Post date:** [May 25, 2022, 7:09pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/18 "2022-05-25T19:09:41Z")
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! 👍👍 ---
**Author:** ![FiekeB](https://forum.obsidian.md/user_avatar/forum.obsidian.md/fiekeb/32/15042_2.png) [@FiekeB](https://forum.obsidian.md/u/FiekeB)\ **Post date:** [June 2, 2022, 8:35pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/19 "2022-06-02T20:35:16Z")
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. ---
**Author:** ![FiekeB](https://forum.obsidian.md/user_avatar/forum.obsidian.md/fiekeb/32/15042_2.png) [@FiekeB](https://forum.obsidian.md/u/FiekeB)\ **Post date:** [June 2, 2022, 9:19pm UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/20 "2022-06-02T21:19:04Z")
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](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/6) ---
**Author:** ![Asta](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/a/e19adc/32.png) [@Asta](https://forum.obsidian.md/u/Asta)\ **Post date:** [June 25, 2022, 9:02am UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/21 "2022-06-25T09:02:18Z")
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. ---
**Author:** ![Nitroshi](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/n/e0b2c6/32.png) [@Nitroshi](https://forum.obsidian.md/u/Nitroshi)\ **Post date:** [September 10, 2022, 11:09am UTC](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084/22 "2022-09-10T11:09:06Z")
Doesn’t work [Next page](https://forum.obsidian.md/t/custom-css-for-tables-5-new-styles-ready-to-use-in-your-notes/17084.md?page=2)