javascript - html表格样式， Angular ，ngTable

Question

我想在表格中显示一些信息，但我很难让它看起来像样，我不希望它看起来太陈旧和乏味。现在我正在使用 angular 和 ngTable ，这是我正在处理的表格:

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

好吧，所以我想做的事情看起来真的很简单，但我不相信这是真的。这在某种程度上是我的想象:

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

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

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

更新:我设法设置了我想要的“宽度”，并通过在每个 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;
}

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