Responsive tab with width column

I have a big table from bootstrap with many columns that should have a certain width. I would like to display all my columns with a horizontal scroll bar if necessary. I’ve seen some exemple but i still have some graphics problems.

I’m using angularJS to get and diplay data with the directive ng-table.

Here is what i tried :

<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>

I purposely put huge width to show the problem clearly

Here is what i have on different resolution :

On small screen :

enter image description here

There is the scrollbar but my different width aren’t respected and my action button are not inline

On bigger screen

enter image description here

There is no scrollbar and my width aren’t respected

Please someone can explain me what i did wrong.

Source: AngularJS