Skip to main content

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <...
Post a Comment

Familiy tree by css3

<!-- this script got from www.crestinfotech.com-Coded by: Manish Wagh -->
<html>
<head>
<style type="text/css">
/*Now the CSS*/
* {margin: 0; padding: 0;}

.tree ul {
padding-top: 20px; position: relative;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
content: '';
position: absolute; top: 0; right: 50%;
border-top: 1px solid #ccc;
width: 50%; height: 20px;
}
.tree li::after{
right: auto; left: 50%;
border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 1px solid #ccc;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute; top: 0; left: 50%;
border-left: 1px solid #ccc;
width: 0; height: 20px;
}

.tree li a{
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 11px;
display: inline-block;

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
border-color:  #94a0b4;
}

/*Thats all. I hope you enjoyed it.
Thanks :)*/
</style>
</head>
<body>

<div class="tree">
<ul>
<li>
<a href="#">Parent</a>
<ul>
<li>
<a href="#">Child</a>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li>
<a href="#">Grand Child</a>
<ul>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

<br/><br/><div style="clear:both"></div><div><a target="_blank" href="http://www.crestinfotech.com/"><span style="font-size: 8pt; text-decoration: none">Manish Wagh</span></a></div>
</body>
</html>

Comments

Post a Comment

Comment

Popular posts from this blog

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <...
Post a Comment
Read more

10 Reasons That Makes Magento The Dominating eCommerce Platform in 2018

In eCommerce market, for marketers, manufacturers and consumer 2017 was a great year, and it seems to be growing in 2018 as well. Every passing year shows tremendous growth in e-commerce sale that helps to take the business to new levels of success. The world's greatest brands love  Magento  for its adaptability since the present shoppers and their purchasing designs are changing incrementally. Just Magento — open source and nimble — can enable you to adjust and flourish. With a worldwide biological community of 150,000 engineers and a system of 300+ profoundly prepared arrangement accomplices, Magento helps your online deals while expanding gross edges. Magento organizations offer more at a lower TCO than dealers on aggressive trade stages. Maintaining an e-commerce business isn't a simple undertaking and expects you to put steady endeavors and to strategize to build up a solid web nearness that encourages you to give an upper hand. Wh...
Post a Comment
Read more

Top Tips to get Results from Direct Mail

Studies demonstrate a compelling regular postal mail crusade should attract a 0.5 percent to 1 percent reaction. These “Top Tips to get Results from Direct Mail” will enable you and your partners to get the outcomes you need. Top Tips to get Results from Direct Mail Here are the top tips to get results from direct mail. 1. An intense feature Incorporate a solitary, focal message on the envelope or the front of the postcard. Case: “The Crest Team Sells More Real Estate.” The feature should fill no less than 15 percent of the front of the mailer. 2. A realistic that strengthens the focal message The realistic ought to be straightforward. Illustration: a home with a Sold sign plainly obvious. 3. Shading that pops When you take a gander at a taunt up of the card, do you see the feature first? Influence the feature and other content to emerge by utilizing shading that stands out from the foundation shading. 4. Subheads that lead into content On the off chance that ...
Post a Comment
Read more