Отзывчивый вкладка с шириной столбца

У меня есть большая таблица из начальной загрузки с множеством столбцов, которые должны иметь определенную ширину. Я хотел бы отобразить все мои столбцы с горизонтальной полосой прокрутки, если это необходимо. Я видел некоторые примеры, но у меня все еще есть некоторые проблемы с графикой.

Я использую angularJS для получения и воспроизведения данных с помощью директивы ng-table.

Вот что я попробовал:

<div style="width: 100% ; overflow: auto; justify-content: space-between; align-content: space-between; display: flex">
<table ng-table="tableParams" class="table table-striped editable-table" >

    <colgroup>
        <col width="50px" />
        <col width="2000px" />
        <col width="2000px" />
        <col width="2000px" />
        <col width="2000px" />
        <col width="1000px" />
        <col width="6000px" />
        <col width="2000px" />
        <col width="200px" />
        <col width="400px" />
        <col width="400px" />
        <col width="700px" />
    </colgroup>

    <tr ng-repeat="user in $data" ng-form="rowForm">
        <td data-title="'Id'">{{user.id}} </td>

        <td data-title="'Nom'"">  
            <span ng-switch-default class="editable-text">{{user.nom}</span>
        </td>

        <td data-title="'Prenom'">
            <span ng-switch-default class="editable-text">{{user.prenom}</span>
        </td>
        <td data-title="'Mots de passe'">
            <span ng-switch-default class="editable-text">{{user.password}</span>
        </td>
        <td data-title="'Refs hardware'">
            <span ng-switch-default class="editable-text">{{user.refs}</span>
        </td>
        <td data-title="'Version utilisé'">
            <span ng-switch-default class="editable-text">{{user.Version}</span>
        </td>
        <td data-title="'Email'">
            <span ng-switch-default class="editable-text">{{user.email}</span>
        </td>
        <td data-title="'Chantier'" >
            <span ng-switch-default class="editable-text">{{user.chantier}</span>
        </td>
        <td data-title="'Logiciel'">
            <span ng-switch-default class="editable-text">{{user.chantier}</span>
        </td>
        <td data-title="'Dernier essaie de connexion'">
            <span ng-switch-default class="editable-text">{{user.lastTry}</span>
        </td>
        <td data-title="'Date de validite'">
            <span ng-switch-default class="editable-text">{{user.validity}</span>
        </td>
        <td data-title="'Action'">
            <md-button class="md-icon-button md-fab" style="width: 50px; height: 20px;" ng-click="user.isEditing = true">
                <md-tooltip md-direction="top">Update</md-tooltip>
                <md-icon md-svg-src="img/icons/refresh.svg">
                    md-delay="500">
                </md-icon>
            </md-button>

            <md-button class="md-icon-button md-fab" style="width: 50px; height: 10px;" ">
                <md-tooltip md-direction="top">Update</md-tooltip>
                <md-icon md-svg-src="img/icons/refresh.svg">
                    md-delay="500">
                </md-icon>
            </md-button>
        </td>
    </tr>
</table>

Я специально поставил огромную ширину, чтобы ясно показать проблему

Вот что я имею в другом разрешении:

На маленьком экране:

введите описание изображения здесь

Есть полоса прокрутки, но моя разная ширина не соблюдается, а моя кнопка действия не встроена

На большом экране

введите описание изображения здесь

Нет полосы прокрутки и моя ширина не соблюдается

Пожалуйста, кто-то может объяснить мне, что я сделал не так.

Всего 2 ответа


По умолчанию таблицы не будут учитывать вашу ширину, как вы указали в своем примере. Это будет зависеть от содержимого колонки.

Чтобы таблицы соответствовали заданным значениям ширины, вам нужно использовать фиксированный макет таблицы.

.table {
   table-layout: fixed;
}

добавлять:-

<div class="table-responsive">
<table class="table">
...
</table>
</div>

Есть идеи?

10000