html表格样式，角度，ngTable

Question

我试图在表中显示一些信息，但是我很难使它看起来像样，我不希望它看起来太陈旧和沉闷。现在我在ngTable中使用angular，这是我正在处理的表：

<table ng-table="indexTable" class="table" >
<tr ng-repeat="item in items">
    <td data-title="'ID'">
        {{item.id}}
     </td>
     <td data-title="'Title'">
        {{item.title}}
     </td>
     <td data-title="'Date'">
        {{item.created | date:'dd-MM-yyyy'}}
     </td>
     <td data-title="'Index'">
        {{item.index}}
     </td>
     <td data-title="'Status'">
        {{item.statusForTiltak}}
     </td>
</tr>

在我的.css文件中，我从以下开始：（来自ngTable网站）

.ng-table {
border: 1px solid #000;

}

但是，一旦我尝试编辑看起来很恐怖的内容，我就在w3schools上添加了一些教程，但这只是基本的内容，我无法将它们整合成一个不错的东西。样式表有哪些技巧？有人可以为我指出正确的方向，无论是教程还是示例，我都需要一些帮助。

Okey，所以我希望能够使外观看起来非常简单，但我不相信这是事实。这是我的想象方式：

特别是我需要帮助的两件事：

• 删除每行下方的行
• 限制描述列

我认为问题在于限制描述列，这是否可能？我不希望它是可滚动的，我将有另一种查看该列中整个文本的方式。

更新：通过在每个td上设置此宽度，我设法设置了所需的'宽度'，并删除了每行下方的边​​框：

ng-style="{'width': '40%', 'border': 'none'}"

我不知道为什么，但是在.css文件中无法执行此操作。

[我仍然需要弄清楚如何限制“描述”列上的文本，我尝试将“溢出”设置为“隐藏”，但是没有运气。

Answer 1

所以我终于设法做到这一点，为了删除行之间的行，我必须在每个td上设置一个'ng-style'：

ng-style="{'width': '40%', 'border': 'none'}"

这是来自“标题”行（不是每行40％）

并且为了限制描述列，我必须使表固定：

#actionTable {
table-layout: fixed;
width: 100%;
}

最后，我设置了文本溢出

#actionTable td{
white-space: nowrap;
text-overflow: ellipsis;
}

注意。这将限制所有列，但我很好。

Answer 2

https://github.com/esvit/ng-table/issues/597-将自定义类设置为列标题，然后将标题应用于该类。请参考此链接以了解如何将自定义类设置为ng-table中的一列。

使用这种方法，您可以将样式应用于特定的列而不是整个表。