如何减少表格视图或网格视图中标题的高度？

Question

我正在尝试制作网格视图的简单演示。其中我有标题标题（具有灰色背景）实际上我需要降低标题的高度或具有灰色背景的表格标题。我们可以添加替代颜色吗行？请查看给定的图像。与我的 plunker 相比，它的标题或标题太小了。其次，行中有替代颜色。我们可以在我的 plunker 中添加它。 http://plnkr.co/edit/7bSnk0fU0NBOF1GIwHSK?p=preview

.search.list-inset, .search.list-inset .item:first-child {
  border-radius: 50px;
}
.search .item-input .icon {
  font-size: 200%;
}
.gray-20 {
  background-color: #eee;
}
@media (min-width: 600px) {
 .search {
   width: 50%; 
   margin-left:auto; 
   margin-right: auto;
 }
}
.mrginrightleft{
   margin-left:5%; 
   margin-right:15%;
}
.brd{
  border: 1px solid grey;
}

这是我的代码！[在此处输入图片描述][1]

Answer 1

Updated Plunker

如何设置条纹行的样式

有两种方法可以做到这一点。一种是使用 :nth-child(even) 或 (odd) 伪类的纯 CSS。您可以在 row 中添加一个类，然后按照自己的方式使用它，例如：

my-class:nth-child(even) .col {
  background-color: blue;
}

但我用不同的方式教你一些关于 ng-repeat 的知识。是的，它是一个循环，但它有一堆特殊的属性，它为你公开。两个特别是 $odd 和 $even。如您所料，如果是奇数迭代，$odd 返回 true，而当索引为偶数时，$even 返回 true。

因此，您可以将这些与 ng-class 一起用作表达式的一部分。在这里，我添加了一个奇数行类：

<div class="row" ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query" ng-class="{'odd-row':$odd}">

然后为了制作样式，我添加了以下规则。我将背景颜色应用于 .col 子元素，以便背景包含在应用于 .col 元素的边框内。

.odd-row .col {
  background-color: #eee;
}

编辑： 实际上，您是正确的， ng-style 将是第三种方式，但它不应用类，它应用内联样式。因此，您需要将带有您样式的对象传递给它，例如（简化）：

ng-style="{'color': 'red'}"