Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns:
<table border="1" ng-repeat="table in xc.tables">
<tr>
<th style="width: 150px !important" ng-class="{'missingpeoplefirstcolumn': $first}" ng-repeat="column in table.cols">{{column}}</th>
</tr>
<tr ng-repeat="row in table.rows">
<td style="width: 150px !important" ng-class="{ 'pinkify': {{row[column]}} == 0 , 'grayit': $last}"
ng-repeat="column in table.cols">
{{row[column]}}
</td>
</tr>
</table>
On the page, only the following CSS properties are applied:
.pinkify
{
background-color: pink;
color: pink !important;
}
.grayit{
background-color: lightgray;
color: black !important;
}
.missingpeoplefirstcolumn
{
width: 150px !important;
}
Despite applying 'Pinkify' and 'grayit', we are unable to enforce a fixed width of 150px for the first column. Any suggestions on why this is happening and how to rectify it?