AngularJS How to add css in table

In this AngularJS example you will learn how to add css in table. In this example you will learn how to use css class to display different row color in HTML table.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Try Now" button given at the bottom.

Syntax

<table>  
	<th>{{'Index' | uppercase }}</th><th>{{'Name' | uppercase }}</th>
	<th>{{'Last Name' | uppercase }}</th><th>{{'Designation' | uppercase }}</th>  
	<th>{{'Salary' | uppercase }}</th><th>{{'Phone' | uppercase }}</th>  
	<tr ng-repeat="emp in employees | orderBy : 'firstName'"> 
	  <td>{{ $index + 1 }}</td>
	  <td>{{ emp.firstName }}</td>  
	  <td>{{ emp.lastName }}</td>  
	  <td>{{ emp.jobTitle }}</td>  
	  <td>{{ emp.salary }}</td>  
	  <td>{{ emp.phone }}</td>  
	</tr>  
</table>  

AngularJS How to add css in table Example

<!DOCTYPE html>              
<html>              
<head> <!-- www.techstrikers.com -->               
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">  
</script>                
    <meta charset="utf-8">              
    <title>AngularJS  How to add css in table code Example</title>  
 <style>  
   table, th , td  {  
  border: 1px solid grey;  
  border-collapse: collapse;  
  padding: 5px;  
  font-family:arial;  
  }
  th{ 
     background-color: #557FFF; 
   }
  table tr:nth-child(odd)	{
    background-color: #f1f1f1;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
  </style>  
  <script>              
var app = angular.module('app', []);              
    app.controller("appController", function ($scope) {        
    $scope.employees = [{    
        firstName:"Jimi",    
        lastName:"Scott",    
        jobTitle:"Developer",    
        salary:20000,    
        phone:"345-333-7845"    
      },    
      {    
          firstName:"Bailey",    
          lastName:"Lee",    
          jobTitle:"Lead",    
          salary:30000,    
          phone:"322-121-213"    
      },    
      {    
          firstName:"Aura",    
          lastName:"Martin",    
          jobTitle:"QA",    
          salary:35000,    
          phone:"322-333-0987"    
      },    
      {    
          firstName:"Austin",    
          lastName:"Williams",    
          jobTitle:"Designer",    
          salary:20000,    
          phone:"322-265-2321"    
      },    
      {    
          firstName:"Bara",    
          lastName:"Miller",    
          jobTitle:"Tester",    
          salary:15000,    
          phone:"322-890-2321"    
      },{    
          firstName:"Carlton",    
          lastName:"Taylor",    
          jobTitle:"Manager",    
          salary:45000,    
          phone:"322-456-2321"    
      },    
      {    
          firstName:"Adisa",    
          lastName:"White",    
          jobTitle:"Developer",    
          salary:25000,    
          phone:"121-333-2321"    
      }];    
    });       
</script>              
</head>              
<body style="background-color:#DDE4E9;font-family:arial;">              
<fieldset style="background-color:#DDE4E9;">                          
<legend>AngulerJS How to add css in table   
code Example</legend>               
<div ng-app="app">       
<div ng-controller="appController">       
  <table>  
	<th>{{'Index' | uppercase }}</th><th>{{'Name' | uppercase }}</th>
	<th>{{'Last Name' | uppercase }}</th><th>{{'Designation' | uppercase }}</th>  
	<th>{{'Salary' | uppercase }}</th><th>{{'Phone' | uppercase }}</th>  
	<tr ng-repeat="emp in employees | orderBy : 'firstName'"> 
	  <td>{{ $index + 1 }}</td>
	  <td>{{ emp.firstName }}</td>  
	  <td>{{ emp.lastName }}</td>  
	  <td>{{ emp.jobTitle }}</td>  
	  <td>{{ emp.salary }}</td>  
	  <td>{{ emp.phone }}</td>  
	</tr>  
</table>  
  </div>      
</div>              
</div>              
 </fieldset>               
</body>              
</html>

See Live Example

« Previous