when using iphone table css renders weirdly and buggy

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.table-container {
    padding: 0 10%;
    background-color: #14131f;
    width: 100%;
    height: 100%;
}
.table-heading {
    font-size: 40px;
    text-align: center;
    color: #CCC;
    line-height: 150px

}
.table-turniere {
    width: 100%;
    border-collapse: collapse;

}
.table-turniere thead {
    background-color: #14131f;
}

.table-turniere thead tr th {
    font-size: 14px;
    font-weight: medium;
    letter-spacing: 0.35px;
    color: #CCC;
    opacity: 1;
    padding: 12px;
    vertical-align: top;
    border: 1px solid #63FFA5;
}

.table-turniere tbody tr td {
    font-size: 14px;
    letter-spacing: 0.35px;
    font-weight: normal;
    color: #CCC;
    background-color: #25233b;
    padding: 8px;
    text-align: center;
    border: 1px solid #CCC;

}
.table-turniere tbody tr td .einbtn {
    width: 130px;
    text-decoration: none;
    line-height: 35px;
    display: inline-block;
    background-color: #14131f;
    font-weight: medium;
    color: #CCC;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid #63FFA5;
    font-size: 14px;
    opacity: 1;
    border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
    width: 130px;
    text-decoration: none;
    line-height: 35px;
    display: inline-block;
    background-color: #63FFA5;
    font-weight: medium;
    color: #14131f;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid #14131f;
    font-size: 14px;
    opacity: 1;
    border-radius: 7px;
}

@media (max-width: 768px){
    .table-turniere thead {
        display: none;
    }
    .table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
        display: block;
        width: 100%;
    }
    .table-turniere tr {
        margin-bottom: 15px;
    }
    .table-turniere tbody tr td{
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    .table-turniere td:before{
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: 600;
        font-size: 14px;
        text-align: left;
    }
}

{% load static %}
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href={% static "css/fencingstyles.css" %}>
    <link rel="stylesheet" href={% static "css/styles.css" %}>
    <link rel="stylesheet" href={% static "css/loader.css" %}>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {% include "partials/_preloader.html" %}
    <nav class="navbar">    
        <div class="navbar__container">
            <a href="/" id="navbar__logo"><i class="fa-solid fa-dna"></i></a>
            <!-- <div class="navbar__toggle" id="mobile-menu">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <ul class="navbar__menu">
                    <li class="navbar__item">
                        <a href="/fencing" class="navbar__links">FENCING</a>
                    </li>
                </ul>

            </div> -->
            <ul class="navbar__menu">
                <li class="navbar__item">
                    <!-- <a href="/" class="navbar__links">HOME</a> -->
                </li>
                <li class="navbar__item">
                    <!-- <a href="/tech.html" class="navbar__links">TECH</a> -->
                </li>
                <li class="navbar__item">
                    <!-- <a href="/" class="navbar__links">PRODUCTS</a> -->
                </li>
                <li class="navbar__btn">
                    <!-- <a href="/" class="button">SIGN UP</a> -->
                </li>
            </ul></div></nav>


    <div class="table-container">
        <h1 class="table-heading">Turniere</h1>
        <table class="table-turniere">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Datum</th>
                    <th>Ort</th>
                    <th>Kategorie</th>
                    <th>Einladung</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-label="Name">kleeblatt</td>
                    <td data-label="Datum">2.64.234</td>
                    <td data-label="Ort">foil</td>
                    <td data-label="Kategorie">u21</td>
                    <td data-label="Einladung"><a href="/" class="einbtn">PDF</a></td>
                    <td data-label="Details"><a href="/" class="refbtn">Details</a></td>
                </tr>
                <tr>
                    <td data-label="Name">dead</td>
                    <td data-label="Datum">wd34</td>
                    <td data-label="Ort">fwadwdl</td>
                    <td data-label="Kategorie">wwwwwww1</td>
                    <td data-label="Einladung"><a href="/" class="einbtn">PDF</a></td>
                    <td data-label="Details"><a href="/" class="refbtn">Details</a></td>
                </tr>
            </tbody>
        </table>
    </div>



    {% include "partials/_footer.html" %}
    <script src="{% static 'js/loader.js' %}"></script>
</body>
</html>

hey guys i need some help with this: when using iphone 12 dimensions in google dev tools i get my table coordinated right but when i open my page through my phone i gets really buggy, (iphone 12)

in google dev tools with iphone 12 resolution settings (as it should be)

on my iphone 12 (buggy)

i want the tables to render out right so as in google dev tools, on my iphone and this is the source code:

html code:

{% load static %}
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href={% static "css/fencingstyles.css" %}>
    <link rel="stylesheet" href={% static "css/styles.css" %}>
    <link rel="stylesheet" href={% static "css/loader.css" %}>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {% include "partials/_preloader.html" %}
    <nav class="navbar">    
        <div class="navbar__container">
            <a href="/" id="navbar__logo"><i class="fa-solid fa-dna"></i></a>
            <!-- <div class="navbar__toggle" id="mobile-menu">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
                <ul class="navbar__menu">
                    <li class="navbar__item">
                        <a href="/fencing" class="navbar__links">FENCING</a>
                    </li>
                </ul>

            </div> -->
            <ul class="navbar__menu">
                <li class="navbar__item">
                    <!-- <a href="/" class="navbar__links">HOME</a> -->
                </li>
                <li class="navbar__item">
                    <!-- <a href="/tech.html" class="navbar__links">TECH</a> -->
                </li>
                <li class="navbar__item">
                    <!-- <a href="/" class="navbar__links">PRODUCTS</a> -->
                </li>
                <li class="navbar__btn">
                    <!-- <a href="/" class="button">SIGN UP</a> -->
                </li>
            </ul></div></nav>


    <div class="table-container">
        <h1 class="table-heading">Turniere</h1>
        <table class="table-turniere">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Datum</th>
                    <th>Ort</th>
                    <th>Kategorie</th>
                    <th>Einladung</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-label="Name">kleeblatt</td>
                    <td data-label="Datum">2.64.234</td>
                    <td data-label="Ort">foil</td>
                    <td data-label="Kategorie">u21</td>
                    <td data-label="Einladung"><a href="/" class="einbtn">PDF</a></td>
                    <td data-label="Details"><a href="/" class="refbtn">Details</a></td>
                </tr>
                <tr>
                    <td data-label="Name">dead</td>
                    <td data-label="Datum">wd34</td>
                    <td data-label="Ort">fwadwdl</td>
                    <td data-label="Kategorie">wwwwwww1</td>
                    <td data-label="Einladung"><a href="/" class="einbtn">PDF</a></td>
                    <td data-label="Details"><a href="/" class="refbtn">Details</a></td>
                </tr>
            </tbody>
        </table>
    </div>



    {% include "partials/_footer.html" %}
    <script src="{% static 'js/loader.js' %}"></script>
</body>
</html>

css code:

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.table-container {
    padding: 0 10%;
    background-color: #14131f;
    width: 100%;
    height: 100%;
}
.table-heading {
    font-size: 40px;
    text-align: center;
    color: #CCC;
    line-height: 150px

}
.table-turniere {
    width: 100%;
    border-collapse: collapse;

}
.table-turniere thead {
    background-color: #14131f;
}

.table-turniere thead tr th {
    font-size: 14px;
    font-weight: medium;
    letter-spacing: 0.35px;
    color: #CCC;
    opacity: 1;
    padding: 12px;
    vertical-align: top;
    border: 1px solid #63FFA5;
}

.table-turniere tbody tr td {
    font-size: 14px;
    letter-spacing: 0.35px;
    font-weight: normal;
    color: #CCC;
    background-color: #25233b;
    padding: 8px;
    text-align: center;
    border: 1px solid #CCC;

}
.table-turniere tbody tr td .einbtn {
    width: 130px;
    text-decoration: none;
    line-height: 35px;
    display: inline-block;
    background-color: #14131f;
    font-weight: medium;
    color: #CCC;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid #63FFA5;
    font-size: 14px;
    opacity: 1;
    border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
    width: 130px;
    text-decoration: none;
    line-height: 35px;
    display: inline-block;
    background-color: #63FFA5;
    font-weight: medium;
    color: #14131f;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid #14131f;
    font-size: 14px;
    opacity: 1;
    border-radius: 7px;
}

@media (max-width: 768px){
    .table-turniere thead {
        display: none;
    }
    .table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
        display: block;
        width: 100%;
    }
    .table-turniere tr {
        margin-bottom: 15px;
    }
    .table-turniere tbody tr td{
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    .table-turniere td:before{
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: 600;
        font-size: 14px;
        text-align: left;
    }
}



*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.table-container {
    padding: 0 10%;
    background-color: #14131f;
    width: 100%;
    height: 100%;
}
.table-heading {
    font-size: 40px;
    text-align: center;
    color: #CCC;
    line-height: 150px

}
.table-turniere {
    width: 100%;
    border-collapse: collapse;

}
.table-turniere thead {
    background-color: #14131f;
}

.table-turniere thead tr th {
    font-size: 14px;
    font-weight: medium;
    letter-spacing: 0.35px;
    color: #CCC;
    opacity: 1;
    padding: 12px;
    vertical-align: top;
    border: 1px solid #63FFA5;
}

.table-turniere tbody tr td {
    font-size: 14px;
    letter-spacing: 0.35px;
    font-weight: normal;
    color: #CCC;
    background-color: #25233b;
    padding: 8px;
    text-align: center;
    border: 1px solid #CCC;

}
.table-turniere tbody tr td .einbtn {
    width: 130px;
    text-decoration: none;
    line-height: 35px;
    display: inline-block;
    background-color: #14131f;
    font-weight: medium;
    color: #CCC;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid #63FFA5;
    font-size: 14px;
    opacity: 1;
    border-radius: 7px;
}
.table-turniere tbody tr td .refbtn {
    width: 130px;
    text-decoration: none;
    line-height: 35px;
    display: inline-block;
    background-color: #63FFA5;
    font-weight: medium;
    color: #14131f;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid #14131f;
    font-size: 14px;
    opacity: 1;
    border-radius: 7px;
}

@media (max-width: 768px){
    .table-turniere thead {
        display: none;
    }
    .table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
        display: block;
        width: 100%;
    }
    .table-turniere tr {
        margin-bottom: 15px;
    }
    .table-turniere tbody tr td{
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    .table-turniere td:before{
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: 600;
        font-size: 14px;
        text-align: left;
    }
}
{% load static %} <html lang="en"> <head> <script src="https://kit.fontawesome.com/9b825e5fcd.js" crossorigin="anonymous"></script> <link rel="stylesheet" href={% static "css/fencingstyles.css" %}> <link rel="stylesheet" href={% static "css/styles.css" %}> <link rel="stylesheet" href={% static "css/loader.css" %}> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> {% include "partials/_preloader.html" %} <nav class="navbar"> <div class="navbar__container"> <a href="/" id="navbar__logo"><i class="fa-solid fa-dna"></i></a> <!-- <div class="navbar__toggle" id="mobile-menu"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> <ul class="navbar__menu"> <li class="navbar__item"> <a href="/fencing" class="navbar__links">FENCING</a> </li> </ul> </div> --> <ul class="navbar__menu"> <li class="navbar__item"> <!-- <a href="/" class="navbar__links">HOME</a> --> </li> <li class="navbar__item"> <!-- <a href="/tech.html" class="navbar__links">TECH</a> --> </li> <li class="navbar__item"> <!-- <a href="/" class="navbar__links">PRODUCTS</a> --> </li> <li class="navbar__btn"> <!-- <a href="/" class="button">SIGN UP</a> --> </li> </ul></div></nav> <div class="table-container"> <h1 class="table-heading">Turniere</h1> <table class="table-turniere"> <thead> <tr> <th>Name</th> <th>Datum</th> <th>Ort</th> <th>Kategorie</th> <th>Einladung</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td data-label="Name">kleeblatt</td> <td data-label="Datum">2.64.234</td> <td data-label="Ort">foil</td> <td data-label="Kategorie">u21</td> <td data-label="Einladung"><a href="/" class="einbtn">PDF</a></td> <td data-label="Details"><a href="/" class="refbtn">Details</a></td> </tr> <tr> <td data-label="Name">dead</td> <td data-label="Datum">wd34</td> <td data-label="Ort">fwadwdl</td> <td data-label="Kategorie">wwwwwww1</td> <td data-label="Einladung"><a href="/" class="einbtn">PDF</a></td> <td data-label="Details"><a href="/" class="refbtn">Details</a></td> </tr> </tbody> </table> </div> {% include "partials/_footer.html" %} <script src="{% static 'js/loader.js' %}"></script> </body> </html>

Solution

What fixed the problem for me was: Changing display:block —-> to display:grid Now it works on every device like so:

@media (max-width: 768px){
.table-turniere thead {
    display: none;
}
.table-turniere, .table-turniere tbody, .table-turniere tr, .table-turniere td {
    display: grid;
    width: 100%;
}
}