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

Question

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

Я использую 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>

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

Вот что у меня на разном разрешении:

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

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

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

Нет полосы прокрутки и моя ширина не учитывается

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

Answer 1

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

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

.table {
   table-layout: fixed;
}

Answer 2

добавить: -

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