What I’m trying to do
I’d like to be able to maximize the width of tables, specifically Dataview tables, but not regular text.
Things I have tried
The only successful method I’ve found is using table-100 while using Minimal theme, but I’d love to be able to do this in another theme.
I’ve been trying to find the applicable code parts from Minimal theme, but so far no luck.
So far I’ve tried this, but it hasn’t worked.
.table-100 .markdown-source-view.mod-cm6,
.table-100.markdown-source-view.mod-cm6 {
--table-drag-handle-background-active: transparent; }
.table-100 .markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle,
.table-100.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle {
inset-inline-end: calc(100% - var(--table-drag-handle-size)) !important; }
.table-wide,
.table-max,
.table-100 {
--table-max-width: 100%;
--table-width: 100%; }
.table-wide {
--container-table-width: var(--line-width-wide);
--container-dataview-table-width: var(--line-width-wide);
--container-table-margin: auto;
--table-edge-cell-padding-first: 0px; }
.table-max {
--container-table-width: var(--max-width);
--container-table-max-width: calc(var(--max-width) + var(--table-drag-space)*2);
--container-dataview-table-width: var(--max-width);
--container-table-margin: auto;
--table-edge-cell-padding-first: 0px;
--table-margin: 0; }
.table-100 {
--container-table-width: 100%;
--container-dataview-table-width: 100%;
--container-table-max-width: 100%;
--container-table-margin: 0;
--table-edge-cell-padding-first: 16px;
--table-edge-cell-padding-last: 16px;
--table-margin: 0;
--table-drag-padding: var(--table-drag-space) 0;
--table-wrapper-width: min(fit-content, 100%); }
.table-100 .dataview.list-view-ul {
max-width: var(--max-width);
width: var(--line-width);
margin-inline: auto; }
.table-100 .table-col-btn {
display: none !important; }
@media (max-width: 400pt) {
body {
--cards-min-width:var(--cards-mobile-width); } }
.cards.table-100 table.dataview tbody,
.table-100 .cards table.dataview tbody {
padding: 0.25rem 0.75rem; }
.cards table.dataview {
--table-width: 100%;
--table-edge-cell-padding-first: calc(var(--cards-padding)/2);
--table-edge-cell-padding-last: calc(var(--cards-padding)/2);
--table-cell-padding: calc(var(--cards-padding)/3) calc(var(--cards-padding)/2);
line-height: 1.3; }
.cards table.dataview tbody {
clear: both;
padding: 0.5rem 0;
display: grid;
grid-template-columns: var(--cards-columns);
grid-column-gap: 0.75rem;
grid-row-gap: 0.75rem; }
.cards table.dataview > tbody > tr {
background-color: var(--cards-background);
border: var(--cards-border-width) solid var(--background-modifier-border);
display: flex;
flex-direction: column;
margin: 0;
padding: 0 0 calc(var(--cards-padding)/3) 0;
border-radius: 6px;
overflow: hidden;
transition: box-shadow 0.15s linear;
max-width: var(--cards-max-width);
height: auto; }
.cards table.dataview > tbody > tr:hover {
background-color: var(--cards-background-hover) !important;
border: var(--cards-border-width) solid var(--background-modifier-border-hover);
box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.05), 0 1px 3px 1px rgba(0, 0, 0, 0.025);
transition: box-shadow 0.15s linear; }
.cards table.dataview tbody > tr > td {
/* Paragraphs */
/* Links */
/* Buttons */
/* Lists */
/* Images */ }
.cards table.dataview tbody > tr > td:first-child {
font-weight: var(--bold-weight);
border: none; }
.cards table.dataview tbody > tr > td:first-child a {
display: block; }
.cards table.dataview tbody > tr > td:last-child {
border: none; }
.cards table.dataview tbody > tr > td:not(:first-child) {
font-size: calc(var(--table-text-size) * .9);
color: var(--text-muted); }
.cards table.dataview tbody > tr > td > * {
padding: calc(var(--cards-padding)/3) 0; }
.cards table.dataview tbody > tr > td:not(:last-child):not(:first-child) {
padding: 4px 0;
border-bottom: 1px solid var(--background-modifier-border);
width: calc(100% - var(--cards-padding));
margin: 0 calc(var(--cards-padding)/2); }
.cards table.dataview tbody > tr > td a {
text-decoration: none; }
.cards table.dataview tbody > tr > td > button {
width: 100%;
margin: calc(var(--cards-padding)/2) 0; }
.cards table.dataview tbody > tr > td:last-child > button {
margin-bottom: calc(var(--cards-padding)/6); }
.cards table.dataview tbody > tr > td > ul {
width: 100%;
padding: 0.25em 0 !important;
margin: 0 auto !important; }
.cards table.dataview tbody > tr > td:has(img) {
padding: 0 !important;
background-color: var(--background-secondary);
display: block;
margin: 0;
width: 100%; }
.cards table.dataview tbody > tr > td img {
aspect-ratio: var(--cards-aspect-ratio);
width: 100%;
object-fit: var(--cards-image-fit);
max-height: var(--cards-image-height);
background-color: var(--background-secondary);
vertical-align: bottom; }
.markdown-source-view.mod-cm6.cards .dataview.table-view-table > tbody > tr > td,
.trim-cols .cards table.dataview tbody > tr > td {
white-space: normal; }
/* Sorting menu */
.cards.table-100 table.dataview thead > tr,
.table-100 .cards table.dataview thead > tr {
right: 0.75rem; }
.table-100 .cards table.dataview thead:before,
.cards.table-100 table.dataview thead:before {
margin-right: 0.75rem; }
I’d also be OK, if the table width was applied to the whole vault, so I wouldn’t have to add the custom cssClass per note.
Thanks
Just found this other thing in block-width.scss, but now it’s applied to everything, and messing with the formatting of everything including the properties:
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer {
max-width: 100%;
width: 100%;
}