JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script>
<script src="ap.js"></script>
<style>
thead {
display: table-header-group;
vertical-align: middle;
border-color: red;
}
</style>
</head>
<body ng-controller="MainCtrl">
<table ng-table="tableParams" class="table">
<thead>
<tr><td>Name</td><td>Tier</td><td>Sec</td><td>m</td><td>ob</td></tr>
<tr ng-repeat="user in $data">
<td title="'Name'">{{user.name}}</td>
<td title="'Tier'">{{user.tier}}</td>
<td title="'Sec.'">{{user.secg}}</td>
<td title="'m1'">{{user.m1}}</td>
<td title="'ob1'">{{user.ob1}}</td>
</tr>
</thead>
</table>
</body>
</html>
JavaScript
var app = angular.module('plunker', ["ngTable"]);
app.controller('MainCtrl', function($scope, NgTableParams) {
$scope.name = 'World';
var data = [
{
name: "val",
tier: "IV",
secg: "aws",
m1: "m1",
m2: "m2",
m3: "m3",
m4: "m4",
ob1: "ob1",
ob2: "ob2",
},
{
name: "val",
tier: "V",
secg: "as",
m1: "m1",
m2: "m2",
m3: "m3",
m4: "m4",
ob1: "ob1",
ob2: "ob2",
}
];
$scope.tableParams = new NgTableParams({}, { dataset: data});
});