Refer to [[Pub Wrap#Tables as Cards]] for more information. This page carves out just the CSS snippet to achieve that functionality. Also refer that page for instructions on how to use.
This snippet was developed on top of base Obsidian, so beware it may have strange and unexpected interactions with any themes and snippets you may have.
```css
body {
--colour-neutral-light-rgb: 200, 200, 200;
--colour-neutral-mid-rgb: 120, 120, 120;
--colour-neutral-medium-rgb: 40, 40, 40;
--colour-neutral-dark-rgb: 25, 25, 25;
--layout-spacing-standard: 0.5rem;
--cards-ccg-height: 20rem;
}
/****************
Tables
****************/
.markdown-rendered table {
& thead th, & tbody td {
font-size: 80%;
overflow: hidden;
text-overflow: ellipsis;
border: none;
padding: var(--size-2-2) var(--size-4-2);
}
& thead {
border-bottom: 1px solid;
}
}
.pws-tables-nowrap table {
& thead th, & tbody td {
white-space: nowrap;
}
}
.pws-tables-colwidthcap table {
& thead th, & tbody td {
max-width: 20rem;
}
}
.pws-tables-equispaced table {
table-layout: fixed;
width: 100%;
}
.pws-tables-title-col1 table tbody td:nth-of-type(1) { font-size: 100%; font-weight: bold; }
.pws-tables-title-col2 table tbody td:nth-of-type(2) { font-size: 100%; font-weight: bold; }
.pws-tables-title-col3 table tbody td:nth-of-type(3) { font-size: 100%; font-weight: bold; }
/****************
Tables to Cards
****************/
/* Standard Cards */
.pws-tables-cards {
& table {
display: block;
background: none !important;
border: none !important;
& thead, & tfoot {
display: none;
}
& tbody {
display: grid;
height: auto;
margin: var(--layout-spacing-standard);
padding: var(--layout-spacing-standard);
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: calc(2 * var(--layout-spacing-standard));
grid-row-gap: calc(2 * var(--layout-spacing-standard));
@media (max-width: 800px) {
grid-template-columns: 1fr;
}
& tr {
display: block;
height: auto;
margin: 0;
padding: var(--layout-spacing-standard);
border-radius: var(--layout-spacing-standard);
overflow: hidden;
box-shadow: 0px 0px 2px 1px rgba(var(--colour-neutral-light-rgb), 0.3);
transition-duration: 0.05s;
&:hover {
transform: scale(1.03);
box-shadow: 0px 0px 4px 2px rgba(var(--color-purple-rgb), 0.8);
}
}
& td {
display: block;
height: auto;
border: none;
max-width: none;
text-wrap: wrap !important;
overflow: hidden !important;
}
}
}
}
/* Cover Style Cards */
.pws-tables-cards.pws-tables-cards-cover,
.pws-tables-cards .pws-tables-cards-cover {
& table tbody {
& tr {
position: relative;
& > td:first-of-type {
position: absolute;
left: calc(-1 * var(--layout-spacing-standard));
top: calc(-1 * var(--layout-spacing-standard));
overflow: hidden;
height: calc(100% + 4 * var(--layout-spacing-standard));
width: calc(100% + 4 * var(--layout-spacing-standard));
& span {
height: 100%;
width: 100%;
}
& img {
position: relative;
object-fit: cover;
min-width: 100%;
min-height: 100%;
z-index: 10;
filter: blur(1px) brightness(30%) saturate(70%);
}
}
& > td:not(:first-of-type) {
position: relative;
z-index: 30;
}
}
}
}
/* Social Style Cards */
.pws-tables-cards.pws-tables-cards-social,
.pws-tables-cards .pws-tables-cards-social {
& table tbody {
& tr {
position: relative;
overflow: hidden;
& > td:first-of-type {
float: left;
position: relative;
left: calc(-2 * var(--layout-spacing-standard));
top: calc(-2 * var(--layout-spacing-standard));
overflow: hidden;
height: calc(100% + 4 * var(--layout-spacing-standard));
width: 35%;
& span {
height: 100%;
width: 100%;
}
& img {
object-fit: cover;
min-width: 100%;
min-height: 100%;
}
}
& > td:not(:first-of-type) {
position: relative;
left: calc(-2 * var(--layout-spacing-standard));
margin: calc(0.5 * var(--layout-spacing-standard));
padding: 0;
}
& > td:nth-of-type(n+2) { font-size: 80%; }
}
}
}
/* CCG Style Cards */
.pws-tables-cards.pws-tables-cards-ccg,
.pws-tables-cards .pws-tables-cards-ccg {
& table tbody {
& tr {
position: relative;
overflow: hidden;
height: var(--cards-ccg-height);
box-shadow: 2px 2px 3px 0px rgba(var(--colour-neutral-medium-rgb), 0.6);
border: 1.5px outset rgba(var(--colour-neutral-dark-rgb), 0.5);
& > td:first-of-type {
position: absolute;
left: calc(-1 * var(--layout-spacing-standard));
top: calc(-1 * var(--layout-spacing-standard));
overflow: hidden;
height: calc(100% + 4 * var(--layout-spacing-standard));
width: calc(100% + 4 * var(--layout-spacing-standard));
z-index: 10;
& span {
height: 100%;
width: 100%;
}
& img {
position: relative;
object-fit: cover;
min-width: 100%;
min-height: 100%;
filter: blur(1px) brightness(30%) saturate(70%);
}
}
& > td:nth-of-type(2) {
position: relative;
overflow: hidden;
height: 50%;
width: 100%;
margin: 0 auto var(--layout-spacing-standard);
padding: 0;
border-radius: var(--layout-spacing-standard) var(--layout-spacing-standard) 0 0;
border: 1px inset rgba(var(--colour-neutral-dark-rgb), 0.5);
z-index: 20;
& span {
height: 100%;
width: 100%;
}
& img {
object-fit: cover;
min-width: 100%;
min-height: 100%;
}
}
& > td:nth-of-type(n+3) {
position: relative;
z-index: 30;
}
}
}
}
/* Tickler Style Cards */
.pws-tables-cards.pws-tables-cards-tickler,
.pws-tables-cards .pws-tables-cards-tickler {
& table tbody {
display: block !important;
height: auto;
margin: 0;
padding: var(--layout-spacing-standard);
& > tr {
display: flex;
align-items: flex-start;
height: calc(1rem + var(--layout-spacing-standard));
padding: 0;
margin: var(--layout-spacing-standard);
overflow: hidden;
position: relative;
& > td {
display: inline-block;
text-wrap: nowrap;
overflow: hidden;
padding: calc(0.5 * var(--layout-spacing-standard)) var(--layout-spacing-standard) ;
& > span {
text-wrap: nowrap;
}
}
& > td:first-of-type {
position: absolute;
left: calc(-1 * var(--layout-spacing-standard));
top: calc(-1 * var(--layout-spacing-standard));
overflow: hidden;
height: calc(100% + 4 * var(--layout-spacing-standard));
width: calc(100% + 4 * var(--layout-spacing-standard));
& span {
height: 100%;
width: 100%;
}
& img {
position: relative;
object-fit: cover;
min-width: 100%;
min-height: 100%;
z-index: 10;
filter: blur(1px) saturate(80%);
}
&::after {
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
overflow: hidden;
height: 100%;
width: 100%;
background-image: linear-gradient(to right, rgba(var(--colour-neutral-dark-rgb), 0.8), rgba(var(--colour-neutral-dark-rgb), 0.1));
z-index: 20;
}
}
& > td:nth-of-type(n+1) {z-index: 30; }
& > td:nth-of-type(3) {flex: 1; text-wrap: nowrap; }
& > td:nth-of-type(n+4) {display: none; }
&:hover {
display: block;
height: auto;
max-height: 15rem;
scroll: auto;
& > td > span { text-wrap: wrap; }
& > td:first-of-type { z-index: -10; }
& > td:nth-of-type(n+2) { display: block; z-index: 30; }
}
}
}
}
```