add striped table

Author: Di Wang

src/app/dashboard/table/table.component.css

@@ -1,3 +1,7 @@
+.row{
+ margin-top: 10px;
+}
+
 .card{
  display: flex;
  flex-direction: column;

src/app/dashboard/table/table.component.html

@@ -62,4 +62,83 @@ <h4 class="card-title">Simple Table</h4>
  </div>
  </div>
  </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="card">
+ <div class="card-header">
+ <i class="material-icons">assignment</i>
+ </div>
+ <div class="card-content">
+ <h4 class="card-title">Striped Table</h4>
+ <div class="table-responsive">
+ <table class="table table-striped">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th></th>
+ <th>Product Name</th>
+ <th>Type</th>
+ <th>Quantity</th>
+ <th class="text-right">Price</th>
+ <th class="text-right">Amount</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td><md-checkbox></md-checkbox></td>
+ <td>Moleskine Agenda</td>
+ <td>Oud-Office</td>
+ <td>25</td>
+ <td class="text-right">€ 49</td>
+ <td class="text-right">€ 1,225</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td><md-checkbox></md-checkbox></td>
+ <td>Stabilo Pen</td>
+ <td>Office</td>
+ <td>35</td>
+ <td class="text-right">€ 10</td>
+ <td class="text-right">€ 300</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td><md-checkbox></md-checkbox></td>
+ <td>A4 Paper Pack</td>
+ <td>Office</td>
+ <td>50</td>
+ <td class="text-right">€ 599.00</td>
+ <td class="text-right">€ 109</td>
+ </tr>
+ <tr>
+ <td>4</td>
+ <td><md-checkbox></md-checkbox></td>
+ <td>Apple iPad</td>
+ <td>Meeting</td>
+ <td>20</td>
+ <td class="text-right">€ 10.99</td>
+ <td class="text-right">€ 4,999</td>
+ </tr>
+ <tr>
+ <td>5</td>
+ <td><md-checkbox></md-checkbox></td>
+ <td>Apple iPhone</td>
+ <td>Communication</td>
+ <td>10</td>
+ <td class="text-right">€ 499.00</td>
+ <td class="text-right">€ 5,999</td>
+ </tr>
+ <tr>
+ <td colspan="5"></td>
+ <td style="font-weight: 500; font-size: 1.25em;" class="text-right">Total</td>
+ <td style="font-size: 26px" class="text-right">€12,999</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
 </div>

src/styles.css

@@ -354,7 +354,7 @@ p {
  margin: 20px 0 0 0;
 }
 
-.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
+.table > thead > tr > th, .table > tbody > tr > th, .table > thead > tr > td, .table > tbody > tr > td{
  padding: 12px 8px;
  vertical-align: middle;
 }