请将此表列的宽度适合刚刚好。不要太宽，不能太窄 [英] Make this table column width fit just nice. Not too wide, not too narrow

问题描述

我使用angularjs ngtable模块来创建此表。

I am using angularjs ngtable module to create this table.

下面是相关的HTML code;

Here is the relevant html code;

<div ng-controller="TestCtrl" class="container">
    <table ng-table="tableParams" class="table table-bordered">
        <thead>
        <tr>
            <th>name</th>
            <th>remarks</th>
        </tr>
        </thead>

        <tbody>
        <tr ng-repeat="test in $data">
            <td data-title="'name'" >
                {{test.name}}
            </td>
            <td data-title="'remarks'">
                {{test.remarks}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

的名称字符串恰好是非常短的。有时，这是至多5个字符。有时，至多3个字符。为名称列的宽度通常比必要宽。如何使此列适合刚刚好？

The name string happens to be very short. Sometimes, it is at most 5 characters. Sometimes, at most 3 characters. The column width for name is usually wider than necessary. How to make this column fit just nice?

推荐答案

您可以用CSS做出来。添加一个额外的类到表例如表展开

You can make it with css. Add an extra class to your table e.g. table-expand

所以你的桌子会

<table ng-table="tableParams" class="table table-bordered table-expand">

和CSS的此类

.table-expand tbody tr td:nth-child(1n) {
    white-space:nowrap;
}

.table-expand tbody tr td:nth-child(2n) {
    width:100%
}

看到这个演示

这篇关于请将此表列的宽度适合刚刚好。不要太宽，不能太窄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！