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

添加：-

In [1]: set([1,6,8,4])                                                                                                                                                                                                       
Out[1]: {1, 4, 6, 8}

In [2]: %doctest_mode                                                                                                                                                                                                        
Exception reporting mode: Plain
Doctest mode is: ON
>>> set([1,6,8,4])                                                                                                                                                                                                           
{8, 1, 4, 6}

带有宽度列的响应式标签

2 个答案: