css - 使此表列宽度适合。不太宽也不太窄

Question

我正在使用 angularjs ngtable 模块来创建这个表。

这里是相关的html代码；

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

name 字符串恰好很短。有时，它最多为 5 个字符。有时，最多 3 个字符。 name 的列宽通常比需要的宽。如何使这个列恰到好处？

Answer 1

你可以用css来做。在您的表中添加一个额外的类，例如表格扩展

所以你的 table 会是

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

看这个demo