Вопрос стиля приложения в мобильном телефоне, планшете

Question

Я работаю над Angular 4 и создаю приложение.Он работает нормально, но проблема возникает, когда я запускаю его на мобильном телефоне.Весь стиль изменился И уничтожил все приложение. Я беспокоюсь о том, что я должен сделать.Буду признателен за любую помощь

Answer 1

Возьмите Div перед таблицей и примените div div width: 100%; overflow: auto;

.demo {
    width: 100%;
    overflow: auto;
}
.demo::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    border-radius: 10px;
    background-color: #d9d9d9;
}
.demo::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #5f6566;
}
.demo::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #d9d9d9;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    
    
<div class="demo">
    <table class="table">
        <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Lastname</th>
            <th>Lastname</th>
            <th>Lastname</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>John</td>
            <td>John</td>
            <td>Doe</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td>john@example.com</td>
        </tr>
        </tbody>
    </table>
</div>