Safari iPhone、Mac 中的响应式表格设计中断答案

【问题标题】：Responsive table design breaks in Safari iPhone, MacSafari iPhone、Mac 中的响应式表格设计中断
【发布时间】：2020-09-14 04:51:51
【问题描述】：

我有一个 angularJS 应用程序，我使用 ng-table 显示数据。为了使表格响应，我做了以下工作，在 chrome 中可以正常工作，但不能在 safari 或 edge 中正常工作。有人有什么想法吗？

它在 Chrome 中的外观：

它在 Safari 中的外观：

HTML：

    <div class="table-mob-cards">   
    <table class="table table-striped contactPeople-table" ng-table="$ctrl.tableParams">
        <tr class="drillable" ng-repeat="p in $data">
          <td data-title="name" filter="{FullName:'text'}" sortable="'FullName'" data-rth-label="Name">{{ p.FullName }}</td>
          <td data-title="jobtitle" filter="{JobTitle:'text'}" sortable="'JobTitle'" data-rth-label="Job Title">{{ p.JobTitle }}</td>
          <td data-title="phone" filter="{primaryphone:'text'}" sortable="'primaryphone'" data-rth-label="Primary Phone">{{ p.primaryphone }}</td>
          <td class="text-center" data-title="entry" sortable="'Authorised'" data-rth-label="entry">
            <md-checkbox ng-model="p.Authorised" disabled aria-label="authorised"></md-checkbox>
          </td>
          <td class="text-center" data-title="account" sortable="'AuthorisedForAccount'" data-rth-label="account">
            <md-checkbox ng-model="p.AuthorisedForAccount" disabled aria-label="AuthorisedForAccount"></md-checkbox>
          </td>
          <td class="text-center" data-title="primary" sortable="'PrimaryContact'" data-rth-label="primary">
            <md-checkbox ng-model="p.PrimaryContact" disabled aria-label="PrimaryContact"></md-checkbox>
          </td>
        </tr>
    </table>
</div>

CSS：

@media screen and (max-width: 600px) {
.table-mob-cards {
    /* Force table to not be like tables anymore */
    thead tr {
        display: none;
    }

    tr {
        margin: 0 0 1rem 0;
        border-radius: 5px !important;
        overflow: hidden;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    }

    table td {
        /* Behave  like a "row" */
        display: flex;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        text-align: center !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        overflow: hidden;
        font-size: 12px;
        padding-left: 35% !important;
        min-height: 25px;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        word-break: break-all !important;
        white-space: normal !important;
        md-checkbox {
            margin-top: 0px !important;
            margin-bottom: 0px;
        }
    }



    table td::before {
        /* Now like a table header */
        position: absolute;
        font-weight: bold;
        font-size: 12px;
        /* Top/left values mimic padding */
        content: attr(data-rth-label);
        text-transform: capitalize;
        background-color: #ddd;
        top: 0%;
        left: 0%;
        width: 30%;
        height: 100%;
        padding: 3px !important;
        text-align: center !important;
        word-break: normal !important;
        white-space: normal !important;
    }

}

如果我注释掉

display: flex;

从表 td 它也打破了铬。但是我不明白为什么这在 Safari 或 Edge 中不起作用。

任何想法都会很棒，谢谢:)

【问题讨论】：

标签： css angularjs html-table

【解决方案1】：

我解决了我的问题...我希望这可以帮助其他人。

This 帖子建议在您的 html 顶部的 <html> 之前添加 <!DOCTYPE html>。

我已经有了这个，但我发现由于应用程序中有一些包含文件，我在 <!DOCTYPE html> 之前声明了 2 个 div，这导致了问题。

【讨论】：