如何降低TABEL视图或网格视图标题的高度？ [英] how to reduce the height of header in tabel view or grid view?

问题描述

我想使网格视图。在简单的演示，我有（有灰色背景）称号的头其实我需要减少标题或有灰色背景表头的高度。可我们添加的替代颜色行？请参阅给定的图像。它页眉或丝毫不差太小，相比于我的plunker其次还有其他颜色行。可我们补充一点，在我的plunker。
http://plnkr.co/edit/7bSnk0fU0NBOF1GIwHSK?p=$p$pview

I am trying to make simple demo of grid view .In which I have header of title (having gray background) actually I need to reduce the height of title or headers of table which have gray background .can we add alternate color of rows ? please see the given image .It header or tittle is too small as compared to my plunker .Secondly there is alternate color in row .can we add that in my 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;
}

这是我的code！[此处输入的形象描述] [1]

here is my code![enter image description here][1]

推荐答案

如何风格条纹行

有两种方法可以做到这一点。一种是使用纯CSS：第n个孩子（偶数）或（奇）伪类。您可以将类添加到您的行并只使用风采吧你想怎么，如：

There are two ways to do this. One is pure CSS using the :nth-child(even) or (odd) pseudo classes. You can add a class to your row and just use style it how you want, such as:

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

但我没有不同的看法，教你一些关于NG-重复。是的，它是一个循环，但它包含了许多它暴露你的特殊属性。两个特别是$奇数和$偶数。如你所料，$奇返回true，如果它是一个奇怪的循环，当指数为偶数$即使是真实的。

But I did it differently to teach you something about ng-repeat. Yes, it's for a loop, but it has a bunch of special properties that it exposes for you. Two in particular are $odd and $even. As you might expect, $odd returns true if it is an odd iteration and $even is true when the index is an even number.

所以，你可以用纳克级使用它们作为你的前任pression的一部分。在这里，我添加类奇数行的：

So, you can use these with ng-class as part of your expression. Here, I'm adding a class of odd-row:

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

然后做出风格，我增加了以下规则。我申请的背景色为.COL孩子，让后台将包含那些在.COL元素应用的边界之内。

Then to make the styles, I added the following rule. I applied the background-color to the .col children so that the background would be contained within the borders that are applied on the .col elements.

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

编辑：
实际上，你是正确的，纳克式将是第三方式，但它并不适用的一类，它适用内嵌样式。因此，你需要与你的风格传递的对象，因此，例如（简体）：

Actually, you are correct, ng-style would be a third-way, but it doesn't apply a class, it applies inline styles. Therefore, you need to pass it an object with you styles, so for example (simplified):

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

这篇关于如何降低TABEL视图或网格视图标题的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！