|
|
| Line 44: |
Line 44: |
| table.display tbody tr:hover { | | table.display tbody tr:hover { |
| background-color: #fcffcc; | | background-color: #fcffcc; |
| }
| |
|
| |
|
| |
| /* ============================
| |
| DataTables Custom Styling
| |
| Ziel: Optisch ansprechendes Design für Tabelle mit ID #stylingtext
| |
| ============================ */
| |
|
| |
| /* --- Grundlegende Tabellenstruktur --- */
| |
| #stylingtext {
| |
| width: 100%; /* Tabelle nimmt gesamte Breite des Containers ein */
| |
| border-collapse: collapse; /* Entfernt doppelte Rahmen zwischen Zellen */
| |
| font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Moderner, gut lesbarer Font */
| |
| font-size: 14px;
| |
| background-color: #ffffff; /* Heller Hintergrund für bessere Lesbarkeit */
| |
| }
| |
|
| |
| /* --- Tabellenkopf (thead) --- */
| |
| #stylingtext thead {
| |
| background-color: #005288; /* Dunkelblauer Hintergrund für den Header */
| |
| color: white; /* Weißer Text für guten Kontrast */
| |
| text-align: left;
| |
| }
| |
|
| |
| #stylingtext thead th {
| |
| padding: 12px 8px; /* Innenabstand oben/unten und rechts/links */
| |
| border-bottom: 2px solid #ccc; /* Dezente Trennlinie unter dem Header */
| |
| }
| |
|
| |
| /* --- Tabellenkörper (tbody) --- */
| |
| #stylingtext tbody tr:nth-child(even) {
| |
| background-color: #f2f2f2; /* Abwechselnde Zeilenfarbe (Zebra-Streifen) */
| |
| }
| |
|
| |
| #stylingtext tbody tr:hover {
| |
| background-color: #e0f0ff; /* Hover-Effekt bei Mouseover */
| |
| }
| |
|
| |
| #stylingtext td {
| |
| padding: 10px 8px;
| |
| border-bottom: 1px solid #ddd; /* Trennung der Zeilen */
| |
| }
| |
|
| |
| /* --- Suchfeld und Buttons (DataTables UI) --- */
| |
| .dataTables_wrapper .dataTables_filter input {
| |
| border: 1px solid #ccc;
| |
| padding: 6px;
| |
| border-radius: 4px;
| |
| margin-left: 0.5em;
| |
| }
| |
|
| |
| .dataTables_wrapper .dataTables_length select {
| |
| border: 1px solid #ccc;
| |
| padding: 6px;
| |
| border-radius: 4px;
| |
| }
| |
|
| |
| /* --- Paginierung unten rechts --- */
| |
| .dataTables_wrapper .dataTables_paginate {
| |
| margin-top: 10px;
| |
| text-align: right;
| |
| font-size: 13px;
| |
| }
| |
|
| |
| .dataTables_wrapper .dataTables_paginate .paginate_button {
| |
| padding: 6px 12px;
| |
| margin: 0 2px;
| |
| border: 1px solid #ddd;
| |
| background-color: #f9f9f9;
| |
| color: #333;
| |
| cursor: pointer;
| |
| border-radius: 3px;
| |
| }
| |
|
| |
| .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
| |
| background-color: #005288;
| |
| color: white;
| |
| border-color: #005288;
| |
| }
| |
|
| |
| .dataTables_wrapper .dataTables_paginate .paginate_button.current {
| |
| background-color: #005288;
| |
| color: white !important;
| |
| border-color: #005288;
| |
| }
| |
|
| |
| /* --- Info unten links (z.B. "Zeige 1 bis 10 von 20 Einträgen") --- */
| |
| .dataTables_wrapper .dataTables_info {
| |
| margin-top: 10px;
| |
| font-size: 13px;
| |
| color: #666;
| |
| }
| |
|
| |
| /* --- Responsives Verhalten (wenn DataTables responsive Extension aktiv ist) --- */
| |
| @media screen and (max-width: 768px) {
| |
| #stylingtext thead {
| |
| display: none; /* Header ausblenden auf kleinen Bildschirmen */
| |
| }
| |
|
| |
| #stylingtext td {
| |
| display: block;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| border: none;
| |
| border-bottom: 1px solid #eee;
| |
| position: relative;
| |
| padding-left: 50%; /* Platz für Label */
| |
| }
| |
|
| |
| } | | } |