手机、平板的应用风格问题答案

【问题标题】：Application style issue in mobile,Tablet手机、平板的应用风格问题
【发布时间】：2019-05-15 10:05:35
【问题描述】：

我正在研究 Angular 4 并构建一个应用程序。它工作正常，但是当我在移动设备上运行它时会出现问题。整个风格改变并分发整个应用程序。我担心我必须做什么。任何帮助将不胜感激

【问题讨论】：

因为您的应用对移动设备和平板电脑没有响应
那么我怎样才能让它响应
在移动设备中显示多列表而不重叠或隐藏某些列是困难的。您是否尝试过使用响应式引导表。参考mdbootstrap.com/docs/jquery/tables/responsive
不，我没试过坚果，我认为这不是解决方案
表格不是响应式布局，因此您的表格也没有响应式。简单明了。阅读一些关于响应式 CSS 的教程。

【解决方案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>

【讨论】：