Added some stylesheets to pagination table

Author: hi

src/app/views/data-table.html

@@ -1,41 +1,43 @@
-<!-- TODO: Replace table to table component when https://github.com/angular/material/issues/796 will closed -->
-<md-toolbar class="md-table-toolbar md-default">
-  <div class="md-toolbar-tools">
-    <span>Nutrition</span>
-</div>
-</md-toolbar>
+<div class="table-responsive-vertical md-whiteframe-z1">
+    <!-- TODO: Replace table to table component when https://github.com/angular/material/issues/796 will closed -->
+    <md-toolbar class="md-table-toolbar md-default">
+    <div class="md-toolbar-tools">
+        <span>Nutrition</span>
+    </div>
+    </md-toolbar>
 
-<!-- exact table from live demo -->
-<md-table-container>
-  <table md-table md-row-select multiple ng-model="selected" >
-    <thead md-head md-order="query.order" md-on-reorder="vm.getItems()">
-      <tr md-row>
-        <th md-column md-numeric>ID</th>
-        <th md-column md-order-by="nameToLower"><span>Dessert (100g serving)</span></th>
-        <th md-column md-numeric md-order-by="calories.value"><span>Calories</span></th>
-        <th md-column md-numeric>Fat (g)</th>
-        <th md-column md-numeric>Carbs (g)</th>
-       
-      </tr>
-    </thead>
-    <tbody md-body>
-      <tr md-row md-select="item" md-select-id="name" md-auto-select ng-repeat="item in vm.tableData">
-        <td md-cell>{{item.id}}</td>
-        <td md-cell>{{item.issue}}</td>
-        <td md-cell>{{item.progress}}</td>
-        <td md-cell>{{item.status}}</td>
-        <td md-cell>
-            <md-progress-linear class="table-progress {{item.class}}"
-                md-mode="determinate"
-                value={{item.progress}}>
-            </md-progress-linear>
-        </td>
-
-        
+    <!-- exact table from live demo -->
+    <md-table-container>
+    <table md-table md-row-select multiple ng-model="selected" class="table table-hover table-bordered" >
+        <thead md-head md-order="query.order" md-on-reorder="vm.getItems()">
+        <tr md-row>
+            <th md-column md-numeric>ID</th>
+            <th md-column md-order-by="nameToLower"><span>Dessert (100g serving)</span></th>
+            <th md-column md-numeric md-order-by="calories.value"><span>Calories</span></th>
+            <th md-column md-numeric>Fat (g)</th>
+            <th md-column md-numeric>Carbs (g)</th>
 
-      </tr>
-    </tbody>
-  </table>
-</md-table-container>
+        </tr>
+        </thead>
+        <tbody md-body>
+        <tr md-row md-select="item" md-select-id="name" md-auto-select ng-repeat="item in vm.tableData">
+            <td md-cell>{{item.id}}</td>
+            <td md-cell>{{item.issue}}</td>
+            <td md-cell>{{item.progress}}</td>
+            <td md-cell>{{item.status}}</td>
+            <td md-cell>
+                <md-progress-linear class="table-progress {{item.class}}"
+                    md-mode="determinate"
+                    value={{item.progress}}>
+                </md-progress-linear>
+            </td>
+
+            
+            
+        </tr>
+        </tbody>
+    </table>
+    </md-table-container>
 
-<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{vm.totalItems}}" md-on-paginate="vm.getItems()" md-page-select></md-table-pagination>
+    <md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{vm.totalItems}}" md-on-paginate="vm.getItems()" md-page-select></md-table-pagination>
+</div>