Angular Tables styles do not work as expected

web
mobile

Topic: Angular Tables styles do not work as expected

kaimeng pro asked 3 years ago

MDB Angular PRO 4.3.5 I've been struggling to make sense of the behavior of table styles. (1) table-striped
In bootstrap/tables,
.table-striped {
  tbody tr:nth-of-type(odd) {
    background-color: $table-accent-bg;
  }
}

when used with Angular *for loop
<tbody *ngFor="let form of forms">
  <tr>
    <th scope="row">{{form.id}}</th>
    <td>{{form.name}}</td>
  </tr>
</tbody>

all the rows have the "odd" row color table-accent-bg
The scss expression seems not able to determine odd or even rows generated by angular *for statement.

(2)  No able to customize table styles Custom entries added to bootstrap/custom file have no effect.   _custom.scss is never imported.
It works after importing the file in bootstrap/bootstrap
@import "functions";
@import "variables";
@import "custom";  <---- I have to add this line
  (3) The last statement in mdb.scss is missing the semicolon.
@import "./angular/mdb-angular";   <--- semicolon added

Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No