html table 样式，angular，ngTable

Question

我正尝试在 table 中显示一些信息，但我很难让它看起来很漂亮 table，我不希望它看起来太陈旧而且乏味的。现在我正在使用 angular 和 ngTable，这是我正在研究的 table：

<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 上学习了一些教程，但这只是基本的东西，我无法将它们组合成好的东西。 table 的样式有哪些技巧？有人能给我指明正确的方向吗，无论是教程还是示例，我都需要一些帮助。

好吧，我想做的事情看起来真的很简单，但我不相信这是真的。这有点像我想象的那样：

具体来说，我需要帮助的有两件事：

删除每行下面的行
限制描述栏

我认为的问题是限制描述栏，这甚至可以吗？我不希望它是可滚动的，我将有另一种方式来查看该列中的整个文本。

更新：我设法设置了我想要的 'width'，同时删除了每行下方的边框，方法是在每个 td 上进行设置：

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

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

我仍然需要弄清楚如何限制 'description' 列上的文本，我尝试将 'overflow' 设置为 'hidden'，但没有成功。

Answer 1

所以我终于成功了，为了删除行之间的线，我不得不在每个 td:

上设置一个 'ng-style'

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

这是来自 'title' 行（不是每行 40%）

为了限制描述栏，我必须修复 table：

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

最后我设置了文本溢出

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

注意。这将使所有列都受到限制，但我对此没有意见。

html table 样式，angular，ngTable

html table styling, angular, ngTable

html

javascript

css

angularjs

ngtable