Media Queries funktionieren nicht in Tabelle - Flexbox

Lupus_III · 23. Januar 2021

Hallo zusammen,

ich teste gerade wie ich einen Stundenplan responsive gestalten kann und habe dazu die DIV's mit Flexbox gestaltet. Leider funktioniert der Befehl für die Media Queries nicht. Aber warum? Wie kann ich jedem zweiten Child einen farbigen Background geben.

Den Code habe ich beigefügt.

HTML

HTML

<!DOCTYPE html>
<html lang="den">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Stundenplan</title>
</head>
<body>
    <div class="wrapper">        
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Montag</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00  <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>                 
            </div>
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Dienstag</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>
                 
            </div> 
            <div class="flexbox-row">
                <div class="flex-item">
                   <p>Mittwoch</p> 
                </div>
                <div class=".flex-item:nth-child(1)">
                    <p>07:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(2)">
                    <p>08:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(3)">
                    <p>09:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(4)">
                    <p>10:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(5)">
                    <p>11:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(6)">
                    <p>12:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(7)">
                    <p>13:00<br> - </p>
                </div>
                <div class=".flex-item:nth-child(8)">
                    <p>14:00 <br> Rückenschule</p>
                </div>
                <div class=".flex-item:nth-child(9)">
                    <p>15:00 <br> Workout</p>
                </div>
                <div class=".flex-item:nth-child(10)">
                    <p>16:00 <br> Workout</p>
                </div>                 
            </div>              
       
    </div>
</body>
</html>

CSS

.wrapper{
    width:90%;
    margin: 0 auto;
}
.flexbox-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    align-content: center;
}

.flexbox-item {
    flex: 0 1 auto;
    background-color: lightblue;
}

.flex-item:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;

}

.flex-item:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(3) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(4) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(5) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(6) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(7) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(8) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(9) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(10) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}


/* Media Queries */

@media (max-device-width: 800px) { /* Breite entspricht genau 800 Pixel */ 
    .wrapper{
        width: 100%;       
    }
    .flexbox-row {
        display: flex;
        flex-direction: column;
        padding: 0 2%;      
    } 

}

Alles anzeigen

Sempervivum · 23. Januar 2021

Die Lösung findet man, wenn man nachliest, wie device-width definiert ist:

Zitat von Selfhtml

Das Merkmal device-width (Geräte-Breite) beschreibt die Breite des Ausgabegerätes, z. B. Breite eines Bildschirms in Pixel.

Testet man das auf einem großen Monitor, indem man das Browserfenster zusammen schiebt, ändert sich natürlich nicht die Breite des Bildschirms. Lösung, indem Du width statt device-width verwendest. Ich würde allerdings erwarten, dass es funktioniert, wenn man es real auf einem Smartphone testet.

Zitat

Wie kann ich jedem zweiten Child einen farbigen Background geben.

Mit :nth-child(odd) bzw. :nth-child(even) kannst Du in CSS jedes zweite Element ansprechen.

Sempervivum · 23. Januar 2021

PS: Man kann das auch mit einer Tabelle mit relativ geringem Aufwand responsiv machen:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial=scale=1.0" />
    <title>
        Responsive Table
    </title>
    <style>
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        table tr {
            background: #f8f8f8;
            border: 1px solid #ddd;
            padding: .35em;
        }

        table th,
        table td {
            padding: .625em;
            text-align: center;
        }

        table th {
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        @media screen and (max-width: 800px) {

            table {
                border: 0;
            }

            table thead {
                display: none;
            }

            table tr {
                border-bottom: 3px solid #ddd;
                display: block;
                margin-bottom: .625em;
            }

            table td {
                border-bottom: 1px solid #ddd;
                display: block;
                font-size: .8em;
                text-align: right;
            }

            table td:last-child {
                border-bottom: 0;
            }

            @media screen and (min-width: 701px) and (max-width: 800px) {
                tbody {
                    display: grid;
                    grid-template-columns: 2fr 1fr 1fr;
                }


                tbody tr:nth-child(3n-2) td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }

            }

            @media screen and (min-width: 561px) and (max-width: 700px) {
                tbody {
                    display: grid;
                    grid-template-columns: 2fr 1fr;
                }

                tbody tr:nth-child(2n-1) td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
            }

            @media screen and (max-width: 560px) {
                tbody {
                    display: grid;
                    grid-template-columns: 1fr;
                }

                tbody td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
            }
        }
    </style>
</head>

<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <td></td>
                <th>7:00</th>
                <th>8:00</th>
                <th>9:00</th>
                <th>10:00</th>
                <th>11:00</th>
                <th>12:00</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Montag</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
            </tr>
            <tr>
                <td>Dienstag</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
            </tr>
            <tr>
                <td>Mittwoch</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Kiesertraining</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
            </tr>
            <tr>
                <td>Donnerstag</td>
                <td>Workout</td>
                <td>Kiesertraining</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
            </tr>
            <tr>
                <td>Freitag</td>
                <td>Workout</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Kiesertraining</td>
            </tr>
        </tbody>
    </table>
    <script>
        const tbl = document.querySelector('table');
        const headCells = tbl.rows[0].cells;
        for (let i = 1; i < tbl.rows.length; i++) {
            const row = tbl.rows[i];
            for (let j = 0; j < row.cells.length; j++) {
                const cell = row.cells[j];
                cell.setAttribute('data-label', headCells[j].textContent);
            }
        }
    </script>
</body>

</html>

Alles anzeigen

Media Queries funktionieren nicht in Tabelle - Flexbox

Jetzt mitmachen!

Teilen

Tags