手机，平板电脑中的应用样式问题

Question

我正在研究angular 4并构建一个应用程序。它的工作正常，但是当我在移动设备上运行时会出现问题。整个样式发生了变化，并扰乱了整个应用程序。我担心自己必须做的事情。任何帮助将不胜感激

Answer 1

将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>