Suppose I have the following angular table
<table>
<tr *ngFor="let company of investTable; let i = index">
<td>
{{company.name}}
</td>
<td>
{{company.price}}
</td>
<td>
{{company.profit}}
</td>
</tr>
</table>
How can I make a neat solution to have table cells have a background color depending on the cell value ? lets say if company profit is positive, make it green.
in css
td.highlight {
background-color: green;
}
in html :-
<table>
<tr *ngFor="let company of investTable; let i = index">
<td>
{{company.price}}
</td>
<td [ngClass]="{'highlight': company.profit > 0}">
{{company.profit}}
</td>
</tr>
</table>
You can add this to your html :
<td [style.positive]="company.profit > 0">
and this to your css :
td.positive{
background-color: green;
}
Look into ngStyle and ngClass. Simplest use case would be to directly bind to the style property.
<table>
<tr *ngFor="let company of investTable; let i = index">
<td>
{{company.name}}
</td>
<td>
{{company.price}}
</td>
<td [style.background-color]="company?.profit > 5 ? 'green' : 'red'">
{{company.profit}}
</td>
</tr>
</table>
Related
is it possible to edit table's class (background-color) inside the td if ..else condition.
#<table class='widgetContentText'>
<tr>
<th>..</th>
<th></th>
<th>..</th>
</tr>
<tr>
#If (item.QueueLength(medium) > threshold.Queuethreshold1(medium)) Then
#If (item.QueueLength(medium) > threshold.Queuethreshold2(medium)) Then
#<td class='effect' style="background-color:#FF3333" align="center">
#item.QueueLength(medium)
</td>
Else
#<td class='effect' style="background-color:#FFA500" align="center">
#item.QueueLength(medium)
</td>
End If
Else
#<td align="center">
#item.QueueLength(medium)
</td>
End If
Im still pretty new to AngularJS. Im trying to change the color of the table element so that its yellow if the user voted on this choice.
<div ng-show="poll.userVoted">
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table ng-if="choice.text == poll.userChoice.text" style="background-color: yellow; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
<table ng-if="choice.text != poll.userChoice.text" style="background-color: lightblue; width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td>{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
This is done by using ng-class.
Use ng-class on your td like this:
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text}">...</td>
that will put the css class yellowstyle on the item when your condition is true.
And in your example:
<table class="result-table">
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table style="width: {{choice.votes.length/poll.totalVotes*100}}%; text-align: right">
<tr>
<td ng-class="{yellowstyle: choice.text==poll.userChoice.text, lightbluestyle: choice.text!=poll.userChoice.text}">{{choice.votes.length}}</td>
</tr>
</table>
</td>
</tr>
</table>
with a style.css file that has:
.yellowstyle {background-color: yellow;}
.lightbluestyle {background-color: lightblue;}
I have the following html structure where I am displaying some details inside an html table.
<table cellspacing="15">
<tr>
<td>
<img src="Images/user1.png" />
<label>
User</label>
</td>
<td>
John
</td>
</tr>
<tr>
<td>
<img src="Images/version1.png" />
<label>
Old ID</label>
</td>
<td>
345345
</td>
</tr>
<tr>
<td>
<img src="Images/version3.png" />
<label>
New ID</label>
</td>
<td>
367976
</td>
</tr>
</table>
I want to add margin-top to the image so that the image will be shifted downward by some 3 or 4 pixel but the CSS is not having any effect. Please help.
Also I found that cellspacing is not a valid attribute in HTML5. Any alternate property to achieve the same effect.?
Adding a negative bottom margin to your image
(I generally avoid using negative margins as much as possible, but in this case it's a quick fix and won't effect the text next to it) :
td img {
margin-bottom:-4px;
}
Its working for me.. Anyhow you can try like this LINK, if you want to place img and text in same line
CSS:
td,td img {
line-height:28px;
vertical-align:middle;
}
Alternative for cellspacing is
table {
border-collapse: separate;
border-spacing: 15px;
}
Aligning image:
You can use vertical-align:middle.
See DEMO here.
Margin-top should work correctly, but it probably moves down tha label too.
Possible solution is to use positioning, so:
img {position: relative; top: 4px;}
you can do this.
Just remove <lable> tag & add valign="top" in <td>
<table cellspacing="15">
<tr>
<td valign="top">
<img src="Images/user1.png" />
User
</td>
<td>
John
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version1.png" />
Old ID
</td>
<td>
345345
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version3.png" />
New ID
</td>
<td>
367976
</td>
</tr>
</table>
I have this simple code.
<div class="rating" >
<table>
<tr>
<th> Award </th>
<th> Winner </th>
<th> Runner-up </th>
</tr>
<tr>
<td> Starburst Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Rising Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shooting Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shining Star Award </td>
<td> #winner......................... </td>
<td> #runner-up#.....................................</td>
</tr>
</table>
</div>
table.rating, th,tr,td
{
width:100%;
border-collapse:collapse;
border:1px solid black; height:50px;
border:1px solid black;
}
Using the css I want to make better. How can I have it that it looks more like a table and not be separated like that, and have the be in the middle?
I have created a http://fiddle.jshell.net/9axbx/ , all I really want to do make the table look better.
The following code sets it up more like a table:
<div class="rating" >
<table border="1">
<tr>
<th> Award </th>
<th> Winner </th>
<th> Runner-up </th>
</tr>
<tr>
<td> Starburst Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Rising Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shooting Star Award </td>
<td> #winner </td>
<td> #runner-up#</td>
</tr>
<tr>
<td> Shining Star Award </td>
<td> #winner</td>
<td> #runner-up#</td>
</tr>
</table>
</div>
<style type="text/css">
table.rating, th,tr,td
{
width: 30%;
border-collapse:collapse;
border:1px solid black;
height:50px;
border:1px solid black;
text-align: center;
}
</style>
Here's what it looks like:
I'm not quite sure what you're looking for, but that should be a good start. You really should have the <style></style> tags inside the <head></head> of your html document, but the above still works, for demonstration purposes.
EDIT: Just a note on the changes I made--
I first removed the periods after the text in the last couple of cells. Not quite sure what you put them there for. Second, I added text-align:center to your CSS. If you don't want the text centered, you can change it to, say, text-align:left to align it to the left. Third, You do not need a border, and if you don't want one just remove the border options from the CSS. Finally, I changed the width of your cells to 30%, so they all should be the same width. This makes things much neater and cleaner. 100% makes a cell the full width of the table, which I assume you don't want. If you want a cell to take up more than one column you should use the colspan attribute.
As you can see, I have two tables each inside two divisions . Here is jsFiddle example ! What I want to do is to change the background color of firstDiv's table first column and third column , secondDiv's table second column and fourth column , By CSS only :)
<div id="firstDiv" style="float:left;margin-right:12px;">
<table width="200" border="1" cellpadding="8">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="secondDiv">
<table width="200" border="1" cellpadding="8">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
You are looking at typical usage of nth-child with even/odd selector.
Following should do the trick.
#firstDiv td:nth-child(odd)
{
background-color:#cecece;
}
#secondDiv td:nth-child(even)
{
background-color:#cecece;
}
Fiddle
Another variation:-
#firstDiv td:nth-child(2n+1)
{
background-color:#cecece;
}
#secondDiv td:nth-child(2n+2)
{
background-color:#cecece;
}
If you want to specifically select 1st and 3 alone then you can use
#firstDiv td:nth-child(1),
#firstDiv td:nth-child(3) {
background-color:#cecece;
}
#secondDiv td:nth-child(2),
#secondDiv td:nth-child(4) {
background-color:#cecece;
}
See for support
Use :nth-child pseudo-selector. See the fiddle
Edited:
You can achive it by using nth-child also but all browser does not support nth-child
But the following approach is supported in all browsers..
CSS:
#firstDiv td,
#firstDiv td + td + td{
background-color:#cecece;
}
#firstDiv td + td,
#firstDiv td + td + td + td{
background-color:#fff;
}
#secondDiv td + td,
#secondDiv td + td + td + td{
background-color:#cecece;
}
#secondDiv td,
#secondDiv td + td + td{
background-color:#fff;
}
SEE DEMO
You will need to apply your CSS class to a relevant cell (e.g. 1st TD) of every row in the table. This way an impression will be given that entire column is of a different color. When setup like this if you change background color in CSS class definition - the change will affect all cells in the column at once.