$table-wrapper-background: $cell-background !default; // need a solid color. $table-caption-color: $title-color !default; $table-caption-side: top !default; $table-headers-background: $title-background !default; $table-headers-color: $title-color !default; $table-headers-font-style: $title-font-style !default; $table-headers-font-size: $title-font-size !default; $table-headers-font-weight: $title-weight !default; $table-headers-text-transform: $title-transform !default; $table-headers-font-family: $title-font-family !default; .pk-table-wrapper { overflow: auto; max-width: 100%; // scroll shadow background: linear-gradient(to right, $table-wrapper-background 30%, transparent), linear-gradient(to right, transparent, $table-wrapper-background 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.25), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.25), transparent) 0 100%; background-repeat: no-repeat; background-color: $table-wrapper-background; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-position: 0 0, 100%, 0 0, 100%; background-attachment: local, local, scroll, scroll; } table.pk-data-table { border-collapse: collapse; caption { caption-side: $table-caption-side; color: $table-caption-color; font-size: 120%; padding: 1rem; } th, td { padding: 0.3em 1.5em 0.3em 0.7em; border-bottom: 1px solid #aaa; } th { border-bottom-width: 2px; } .pk-card-field-email, .pk-card-field-filename { word-break: break-all; } } .pk-table-headers { &.pk-data-table, .pk-data-table { thead th { background: $table-headers-background; color: $table-headers-color; font-size: $table-headers-font-size; font-style: $table-headers-font-style; font-weight: $table-headers-font-weight; text-transform: $table-headers-text-transform; font-family: $table-headers-font-family; } } } .pk-table-borders { &.pk-data-table, .pk-data-table { th, td { border: 1px solid #aaa; } th { border-bottom-width: 2px; } } } .pk-table-center { &.pk-data-table, .pk-data-table { th, td { text-align: center; } } } .pk-table-🦓, .pk-table-zebra { &.pk-data-table, .pk-data-table { tbody tr:nth-child(2n+1) { background: rgba(0, 0, 0, 0.065); } } } .pk-table-fit-contain { &.pk-data-table, .pk-data-table { width: 100%; } .text-cell &.pk-data-table, &.text-cell .pk-data-table { width: calc(100% - (0.7em * 2)); // cf _misc.scss l.43 } }