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 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;
}
/* -------------------------------------------- */