Added code for responsive tables

slt/css/abstract/_responsive.scss

@@ -11,3 +11,9 @@
         @content;
     }
 }
+
+@mixin for-narrow-screen {
+    @media screen and (max-width: 800px) {
+        @content;
+    }
+}

slt/css/components/_contact-list.scss

@@ -0,0 +1,13 @@
+table.com-content-category__table {
+    thead {
+        display: none;
+    }
+
+    tr {
+        > th,
+        > td {
+            border: none;
+            box-shadow: none;
+        }
+    }
+}

slt/css/components/_index.scss

@@ -1,3 +1,8 @@
 @use "slideshow";
 @use "article";
 @use "current-page-manu";
+@use "result-table";
+@use "presseberichte";
+@use "verbandstag";
+@use "vereine";
+@use "contact-list";

slt/css/components/_presseberichte.scss

@@ -0,0 +1,49 @@
+@use "../abstract" as abstract;
+
+table.pressespiegel {
+    // display: block;
+    // width: 100%;
+
+    @include abstract.for-narrow-screen {
+        // > tbody {
+        //     display: block;
+        // }
+
+        tr {
+            // display: block;
+            // padding: 7px 0;
+            // border-bottom-style: solid;
+            // border-width: 1px;
+
+            &:first-child {
+                display: none;
+            }
+
+            // &:nth-child(2) {
+            //     border-top-style: solid;
+            // }
+
+            > td {
+                // display: block;
+                // text-align: left !important;
+
+                &:last-child::before {
+                    content: "Rubrik: ";
+                }
+            }
+        }
+    }
+
+    // > tbody {
+    //     display: block;
+
+    //     @include abstract.for-wide-tablet {
+    //         display: initial;
+    //     }
+    // }
+
+    // tr {
+    //     display: block;
+    //     padding: 7px 0;
+    // }
+}

slt/css/components/_result-table.scss

@@ -0,0 +1,15 @@
+@use "../abstract" as abstract;
+
+table.result {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+div.result-links a {
+    display: block;
+
+    @include abstract.for-narrow-screen {
+        padding: 7px 0;
+        margin: 15px 0;
+    }
+}

slt/css/components/_verbandstag.scss

@@ -0,0 +1,11 @@
+@use "../abstract" as abstract;
+
+table.verbandstag {
+    @include abstract.for-narrow-screen {
+        tr {
+            &:first-child {
+                display: none;
+            }
+        }
+    }
+}

slt/css/components/_vereine.scss

@@ -0,0 +1,39 @@
+@use "../abstract" as abstract;
+
+.slt-vereine {
+    @include abstract.for-narrow-screen {
+        display: block;
+        line-height: 150%;
+
+        > tbody,
+        tr,
+        td {
+            display: block;
+            width: 100%;
+        }
+
+        tr {
+            padding: 7px 0;
+
+            &:first-child {
+                display: none;
+            }
+
+            > td:first-child {
+                display: none;
+            }
+
+            > td:nth-child(2) {
+                font-weight: bold;
+            }
+
+            > td:nth-child(4)::before {
+                content: "Ansprechpartner: ";
+            }
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+}

slt/css/core/_default-classes.scss

@@ -24,7 +24,7 @@ li.row-fluid {
 .row-striped .row-fluid:nth-child(n),
 .list-striped li:nth-child(n),
 .table-striped tbody > tr:nth-child(n) > td {
-    background-color: inherit;
+    background-color: initial;
 }
 
 .well {

slt/css/layout/_blog.scss

@@ -5,10 +5,12 @@
 .columns-4,
 .columns-5,
 .columns-6 {
-    display: grid;
+    @include abstract.for-desktop {
+        display: grid;
 
-    > div {
+        > div {
-        margin: 5px 5px 15px 5px;
+            margin: 5px 5px 15px;
+        }
     }
 }
 
@@ -19,12 +21,15 @@
 .columns-3 {
     grid-template-columns: 1fr 1fr 1fr;
 }
+
 .columns-4 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }
+
 .columns-5 {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 }
+
 .columns-6 {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 }

slt/css/layout/_index.scss

@@ -8,3 +8,4 @@
 @use "side-images";
 @use "main-content";
 @use "blog";
+@use "mobile-table";

slt/css/layout/_mobile-table.scss

@@ -0,0 +1,45 @@
+@use "../abstract" as abstract;
+
+table:not(.no-responsive-table) {
+    display: block;
+    width: 100%;
+
+    @include abstract.for-narrow-screen {
+        > tbody {
+            display: block;
+        }
+
+        tr {
+            display: block;
+            padding: 7px 0;
+            border-style: none;
+            border-bottom-style: solid;
+            border-width: 1px;
+
+            // &:first-child {
+            //     display: none;
+            // }
+
+            &:nth-child(2) {
+                border-top-style: solid;
+            }
+
+            // &:nth-child(2n+1) {
+            //     background-color: #BBB;
+            // }
+
+            > td {
+                display: block;
+                text-align: left !important;
+            }
+        }
+    }
+}
+
+table:not(.alternating) {
+    @include abstract.for-narrow-screen {
+        tr:nth-child(2n+1) {
+            background-color: #bbb;
+        }
+    }
+}