Адаптивный дизайн таблиц в Safari iPhone, Mac - PullRequest
Новая
       7

Адаптивный дизайн таблиц в Safari iPhone, Mac

0 голосов
/ 27 мая 2020

У меня есть приложение angularJS, и я отображаю данные с помощью ng-table. Чтобы сделать таблицы адаптивными, я сделал следующее, что корректно работает в chrome, но не в Safari или Edge. Есть у кого-нибудь идеи?

Как это выглядит в Chrome:

chrome screen grab

Как это выглядит в Safari:

safari screen grab

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 он также разбивается на chrome. Однако я не понимаю, почему это не работает в Safari или Edge.

Любые идеи были бы отличными, спасибо :)

1 Ответ

0 голосов
/ 27 мая 2020

Я исправил свою проблему ... Надеюсь, это поможет кому-то другому.

В этом сообщении предлагалось добавить <!DOCTYPE html> перед <html> в верхней части html.

У меня уже было это, НО я обнаружил, что из-за некоторых включаемых файлов в приложении у меня было объявлено 2 div до <!DOCTYPE html>, что вызывало проблему.

...