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

请参阅此demo

Answer 2

我不知道ng-table，但是我做同样的事情，比如这个

<table>
    <colgroup>
        <col span="1" style="width: 10%;">
        <col span="1" style="width: 90%;">
    </colgroup>

这会导致name只有10％的宽度

另一个解决方案是使用css将table设置为fixed，然后在每个width上设置th和td

Answer 3

如果要使列的宽度取决于test.name的内容，请确定最长名称中的字符数，并根据字符数设置列的宽度。

<强> JS

$scope.data = [
    {name: 'a', remarks: 'remark a'},
    {name: 'b', remarks: 'remark b'},
    {name: 'c', remarks: 'remark c'},
    {name: 'defghijk', remarks: 'remark c'}
  ];

  var maxLength = $scope.data.sort(function (a, b) { 
    return (b.name.length - a.name.length); 
  })[0];

  $scope.width = maxLength.name.length * 10 + 'px'

<强> HTML

<div ng-app class="container">
    <table ng-controller="TestCtrl" class="table table-bordered" >
        <thead>
            <tr>
                <th width={{width}}>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>

这是working demo。

使这个表的列宽适合。不太宽，不太窄

3 个答案: