带有宽度列的响应式选项卡答案

【问题标题】：Responsive tab with width column带有宽度列的响应式选项卡
【发布时间】：2019-10-04 15:08:26
【问题描述】：

我有一个来自 bootstrap 的大表，其中有许多列，应该有一定的宽度。如有必要，我想用水平滚动条显示我的所有列。我看过一些例子，但我仍然有一些图形问题。

我正在使用 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>

我故意放大宽度来清楚地显示问题

这是我对不同分辨率的看法：

在小屏幕上：

有滚动条，但我的不同宽度没有得到尊重，我的操作按钮没有内联

在更大的屏幕上

没有滚动条，我的宽度不被尊重

请有人能解释一下我做错了什么。

【问题讨论】：

标签： angularjs html-table bootstrap-4

【解决方案1】：

默认情况下，表格不会像您在示例中给出的那样尊重您的宽度。这将取决于该列的内容。

为了让表格尊重您给定的宽度，您需要使用固定表格布局。

.table {
   table-layout: fixed;
}

【讨论】：

【解决方案2】：

添加：-

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

【讨论】：