initial files

public/styles/table.css

@@ -0,0 +1,86 @@
+/* .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%); }