87 lines
3.3 KiB
CSS
87 lines
3.3 KiB
CSS
/* .table-wrapper { display:grid; grid-column:auto; overflow:auto; min-height:0; min-width:0;} */
|
|
.table-wrapper { overflow:auto; min-width:0; }
|
|
|
|
.table-wrapper.fit-table { grid-template-columns:calc(1fr - 150px); }
|
|
/* .table-wrapper { flex:1 1 auto; overflow-y:auto; } */
|
|
/* .table-wrapper.fit-table { width:100%; max-width:100%; } */
|
|
/* .table-wrapper.fit-table th.word-wrap, .table-wrapper.fit-table td.word-wrap { white-space:normal; word-wrap:break-word; word-break:break-word; overflow-wrap:anywhere; } */
|
|
|
|
|
|
/* #region Dont's */
|
|
th.no-wrap, td.no-wrap { white-space:nowrap !important; }
|
|
th.wrap, td.wrap { white-space:wrap; word-wrap: break-word; word-break: keep-all; }
|
|
table.no-background tr, table.no-background td { background:none !important; }
|
|
|
|
table.border * { border:1px solid white; }
|
|
/* #endregion */
|
|
|
|
|
|
/* #region performance optimizing */
|
|
table thead { position:sticky; top:0; z-index:20; will-change:transform; transform:translateZ(0);}
|
|
|
|
|
|
/* #endregion */
|
|
/* echte Tabelle */
|
|
table { width:calc(100%); border-spacing:0 5px; }
|
|
table th, table td { min-width:100px; max-width:250px; overflow:hidden; white-space:nowrap; }
|
|
|
|
table tr.grouprow:hover { background: rgba(0,0,0,0.05);}
|
|
|
|
/* Header sticky — aber innerhalb echter Tabelle */
|
|
thead th { position:sticky; top:var(--filter-height); }
|
|
|
|
/* KEIN display:block mehr! */
|
|
thead, tbody { display:table-row-group; }
|
|
|
|
|
|
table thead th { padding:5px; }
|
|
/* table tbody td { padding:5px 0px 5px 20px; } */
|
|
table tbody td:not(:first-child):not(:last-child), table thead th:not(:first-child):not(:last-child) { border-width:0; border-style:solid; }
|
|
table tbody tr.grouprow { font-weight:700; }
|
|
|
|
table .text-align\:center { text-align:center; }
|
|
table .text-align\:right { text-align:right; }
|
|
table .text-align\:left { text-align:left; }
|
|
|
|
td { overflow:hidden; text-overflow:ellipsis; /* verhindert, dass Inhalt die Zelle sprengt */ }
|
|
|
|
.table-filter-container {
|
|
border-bottom-width:8px;
|
|
border-bottom-style:solid;
|
|
display:flex;
|
|
justify-content:flex-start;
|
|
flex-direction:column;
|
|
flex-wrap:wrap;
|
|
gap:10px;
|
|
|
|
position:sticky;
|
|
left:0px;
|
|
top:0px;
|
|
/* z-index:20; */
|
|
padding:5px 10px;
|
|
border-radius:var(--border-raduis) var(--border-raduis) 0 0;
|
|
}
|
|
.table-filter-container .live-counter { position:absolute; right:18px; margin-left:auto; font-weight:bold; }
|
|
.table-filter-container input, .table-filter-container select { padding:5px !important; }
|
|
|
|
|
|
th.sort-asc::after {
|
|
content:" ▲";
|
|
}
|
|
|
|
th.sort-desc::after {
|
|
content:" ▼";
|
|
}
|
|
|
|
|
|
td.vote { width:28px; height:28px; position:relative; padding:0; }
|
|
|
|
td.vote:hover { background:rgba(0,0,0,0.05); /* cursor:pointer;*/ }
|
|
td.vote::before,
|
|
td.vote::after { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
|
|
td.yes::before { content:""; width:8px; height:16px; border:solid #2ecc71; border-width:0 3px 3px 0; transform:translate(-50%, -60%) rotate(45deg); }
|
|
td.no::before, td.no::after { content:""; width:3px; height:18px; background:#e74c3c; }
|
|
td.no::before { transform:translate(-50%, -50%) rotate(45deg); }
|
|
td.no::after { transform:translate(-50%, -50%) rotate(-45deg); }
|
|
td.maybe::before { content:""; width:0px; height:0px; border-radius:50%; border:10px solid #f1c40f; transform:translate(-50%, -50%); }
|