Default Table css

[ferol]

Hallo. I created my own css snippet. Is possible use it like default table? Now I need add “table-01” to Properties cssclasses.

This is my css:

/* table-01…*/

.table-01 table {
background-color: #fafafa; /* farba pozadia párnych stlpcov - ROVNAKE-01*/
border: 2px solid #555; /* Vonkajsie ramovanie celej tabulky*/
}

.table-01 thead {
background-color: #bbb; /* farba pozadia hlavičky */
}

.table-01 th {
font-size: 16px; /* velkost textu hlavičky*/
padding-top: 8px !important; /* okraje textu od kraja hlavičky /
padding-bottom: 8px !important; / okraje textu od kraja hlavičky*/

}

.table-01 table > thead > tr > th {
border: 1px solid #555; /* farba ramovania hlavičky*/
}
.table-01 td {
font-size: 16px; /* velkost textu riadkov*/
background-color: #fafafa; /* farba pozadia nepárnych stlpcov - ROVNAKE-01*/
color: black; /* farba textu v riadkoch*/

}
.table-01 td,
.table-01 th {
border: 1px solid #555; /* farba ramovania ostatných riadkov*/
padding-left: 8px; /* okraje textu od kraja tabulky vo View - cislo 8px presne sedi s Editorom*/
padding-right: 8px; /* okraje textu od kraja tabulky vo View - cislo 8px presne sedi s Editorom*/
padding-top: 4px; /* okraje textu od kraja tabulky vo View - cislo 4px presne sedi s Editorom*/
padding-bottom: 4px; /* okraje textu od kraja tabulky vo View - cislo 4px presne sedi s Editorom*/
}

/* table-01 hoover riadkov*/
.table-01 tbody tr:hover td,
.table-01 tbody tr:hover td a {
background-color: #F0EFEA; /* farba hoover pozadia riadkov*/
}

/* end table-01…*/

[ariehen]

If I’m understanding correctly, you want these rules to apply to all (regular) tables without using the cssclass on each note, is that correct? If so, you could remove .table-01 from everything to see how that goes. Depending on the theme you are using, these many not be specific enough, but worth a try. e.g.

table {
    background-color: #fafafa; 
    border: 2px solid #555; 
}

thead {
    background-color: #bbb; 
}

th {
    font-size: 16px; 
    padding-top: 8px !important;
    padding-bottom: 8px !important;

}

table > thead > tr > th {
    border: 1px solid #555;
}

td {
    font-size: 16px;  
    background-color: #fafafa; 
    color: black; 
}

td,
th {
    border: 1px solid #555; 
    padding-left: 8px; 
    padding-right: 8px; 
    padding-top: 4px;
    padding-bottom: 4px; 
}

tbody tr:hover td,
tbody tr:hover td a {
    background-color: #F0EFEA; 
}

---

There are also 37 custom variables / properties you could play with:

body {
/* Tables */
  --table-background: transparent;
  --table-border-width: 1px;
  --table-border-color: var(--background-modifier-border);
  --table-white-space: break-spaces;
  --table-header-background: var(--table-background);
  --table-header-background-hover: inherit;
  --table-header-border-width: var(--table-border-width);
  --table-header-border-color: var(--table-border-color);
  --table-header-font: inherit;
  --table-header-size: var(--table-text-size);
  --table-header-weight: var(--bold-weight);
  --table-header-color: var(--text-normal);
  --table-line-height: var(--line-height-tight);
  --table-text-size: var(--font-text-size);
  --table-text-color: inherit;
  --table-column-min-width: 6ch;
  --table-column-max-width: none;
  --table-column-alt-background: var(--table-background);
  --table-column-first-border-width: var(--table-border-width);
  --table-column-last-border-width: var(--table-border-width);
  --table-row-background-hover: var(--table-background);
  --table-row-alt-background: var(--table-background);
  --table-row-alt-background-hover: var(--table-background);
  --table-row-last-border-width: var(--table-border-width);
  --table-selection: hsla(var(--color-accent-hsl), 0.1);
  --table-selection-blend-mode: var(--highlight-mix-blend-mode);
  --table-selection-border-color: var(--interactive-accent);
  --table-selection-border-width: 2px;
  --table-selection-border-radius: 4px;
  --table-cell-vertical-alignment: top;
  --table-drag-handle-background: transparent;
  --table-drag-handle-background-active: var(--table-selection-border-color);
  --table-drag-handle-color: var(--text-faint);
  --table-drag-handle-color-active: var(--text-on-accent);
  --table-add-button-background: transparent;
  --table-add-button-border-width: var(--table-border-width);
  --table-add-button-border-color: var(--background-modifier-border);
}

[ferol]

Thank you, Perfect working. I use default theme and dont plan use any different…because I customise it for my onw needs