如何减少表格视图或网格视图中标题的高度? [英] how to reduce the height of header in tabel view or grid view?

问题描述

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

.search.list-inset, .search.list-inset .item:first-child {边框半径:50px；}.search .item-input .icon {字体大小:200%；}.gray-20 {背景色:#eee;}@media(最小宽度:600px){.搜索 {宽度:50%；左边距:自动；右边距:自动；}}.mrgin右左{左边距:5%；右边距:15%；}.brd{边框:1px 纯灰色；}

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

解决方案

更新的Plunker

如何设置条纹行的样式

有两种方法可以做到这一点.一种是使用 :nth-child(even) 或 (odd) 伪类的纯 CSS.您可以将一个类添加到您的行，并按照您想要的方式使用它的样式，例如:

my-class:nth-child(even) .col {背景颜色:蓝色；}

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

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

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

.odd-row .col {背景色:#eee;}

实际上，您是对的， ng-style 将是第三种方式，但它不应用类，它应用内联样式.因此，您需要将带有样式的对象传递给它，例如(简化):

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

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;
}

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

解决方案

Updated Plunker

How to style striped rows

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;
}

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.

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}">

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;
}

EDIT: 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'}" 

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