This is super helpful with dataview generated large tables. Thanks a lot!
This may be caused by your theme interfering with this snippet
And another unpleasant moment in the minimalism theme - there is no indentation, does anyone have any ideas how to fix this?)
You can add something like this for the theme you want to fix:
/* Fixes padding for the first cell and header when using minimal theme */
.purpleRed td:first-child,
.purpleRed th:first-child {
padding-left: 11px !important;
}
In my case it was for purpleRed and that theme has a cell padding of 11px, so I just restored it for the first column
1 Like
I loved it so much that I adapted it for the dark theme.
Pretty Tables.css (10.5 KB)
I added the snippet and I am using the Minimal theme: itâs not changing anything!?
Did you enable the snippet? Are you using the right css class i.e. âcssclass: purpleRedâ ?
Yes enabled, this is what I have:
/* Obsidian default theme uses centered headers? */
/* I rather not */
table thead tr th {
text-align: left;
}
/*
=========================
=======Customizers=======
=========================
These are custom "hacks" that can be applied to any
table (with/without custom table visual css).
If you're already using other classes in your note,
remember you can stack these in the cssclass
parameter, like:
cssclass: tableClass1, hackClass2, userClass3, etc
/* -------------------------------------------- */
/* Make tables width same as default note width */
/* -------------------------------------------- */
.wideTable table {
min-width: 100%;
}
/* -------------------------------------------- */
/* -------------------------------------------- */
/* Left align mandatory */
/* -------------------------------------------- */
.leftAlign th,
.leftAlign td {
text-align: left !important;
}
/* -------------------------------------------- */
/* -------------------------------------------- */
/* 1st cell short text, 2nd th bigger text */
/* -------------------------------------------- */
.fixedFc thead tr th:first-child,
.fixedFc tbody tr td:first-child {
width: 8em;
min-width: 8em;
max-width: 8em;
word-break: break-all;
}
.fixedFc th:nth-child(2) {
padding: 9px 20px;
font-size: 21px;
}
.fixedFc td:nth-child(2),
.fixedFc tr > td:last-of-type {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 17em;
}
/* -------------------------------------------- */
/* -------------------------------------------- */
/* 1st cell big text, 2nd small. */
/* -------------------------------------------- */
.wideFc td:nth-child(1),
.wideFc tr > td:last-of-type {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 36em;
}
/* -------------------------------------------- */
/* -------------------------------------------- */
/* If you wanna change table margin, do it here */
/* -------------------------------------------- */
.customMargin table {
margin: 25px 0;
}
/* -------------------------------------------- */
/* -------------------------------------------- */
/* Big purple red table with rounded edges */
/* -------------------------------------------- */
.purpleRed table {
background-color: #3d3b63;
border-collapse: collapse;
border-radius: 10px;
font-size: 1em;
color: white;
overflow: hidden;
width: auto;
/*max-width: 100%;*/
}
.purpleRed thead {
background-color: #f3646c;
}
.purpleRed th {
letter-spacing: 0.3px;
text-shadow: 0 1px 1px #2b2a466b;
}
.purpleRed table > thead > tr > th {
border: 1px solid rgba(0, 0, 0, 0.1);
}
.purpleRed td {
background-color: #3d3b63;
color: white;
}
.purpleRed td strong {
color: white;
}
.purpleRed td,
.purpleRed th {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 11px;
}
.purpleRed thead th:hover,
.purpleRed thead tr:hover,
.purpleRed th:hover {
background-color: #f3646c;
}
.purpleRed tbody tr:hover td,
.purpleRed tbody tr:hover td a {
background-color: #a32959;
color: white;
}
/* -------------------------------------------- */
1 Like
Noobs Guide
I could not get this to work, because I donât know what I am doing. Hereâs how I got it to work.
-
â1. Put the attached CSS file into your vault snippets folder and make sure to enable it in your preferences > CSS Snipets option.â (as DeaconLight noteD)
-
â2. In a note, use the frontmatter cssclass code with the chosen table:â
-
Step two I did not understand. Hereâs what he means
Add a line at the top of your document referencing the CSS snippet and using the cssSnippet name you want to use i.e.
---
title: My note with Latex tables
css: LatexTables # Replace with the actual name of your snippet
---
That solved it for me.
I know thatâs elementary for many of you, but it was the step I didnât understand.
Thank you!
Hello. Thanks to this, my data view has become much cleaner! Thank you very much.
First of all, I want to apologize for asking basic questions because I donât know much about coding.
Each table CSS allows editing of columns except the title row, but it seems that the color of the title row or the line immediately below the title row cannot be modified. I would like to inquire about where and how I can change it.
I really like the LaTex-like table style, but when I switch my Obsidian theme to dark mode, the table format becomes difficult to see. Are there any tips to modify it?
1 Like
I edited the CSS code of the âLaTeXâ style table for the dark theme a bit to suit myself, if it works for you, you can also use it.
The edited version looks like this:
I used variables (var()) rather than specifying specific colors, so if youâre using any custom theme, or custom CSS snippets that change the standard Obsidian colors, this should work as well.
For example, with my brownish colors, the table looks like this:
If youâre not happy with the colors youâre using for the top and bottom borders (light horizontal lines) and the color of the alternating rows in the table itself, simply change the values of var(âcolor-base-50) (the color of the top and bottom borders (horizontal lines)) and var(âcolor-base-10) (the color of the alternating rows in the table itself) in the code to ones that suit you.
Code:
/* tables */
table {
border-top: 2.27px solid var(--color-base-50);
border-bottom: 2.27px solid var(--color-base-50);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
th,
td {
line-height: 3;
}
table > tbody > tr:first-child > td,
table > tbody > tr:first-child > th {
border-top: 2.27px solid var(--color-base-50);
}
thead th {
font-weight: 600 !important;
padding: 12px 0px 12px 0px !important;
}
tr:nth-child(even) {
background-color: var(--color-base-10) !important;
}
body {
--table-border-width: none;
}
.markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper {
padding: 4px 75px 4px 12px;
}
1 Like
Use this one: tableStyles.css (11.7 KB)
I changed each table style so that you in dark mode get the correct colors, able to see cursor against white backgrounds, different selection colors etc
