Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it:
<div class="row">
<div class="col col-25">Date</div>
<div class="col col-50">Name of Customer</div>
<div class="col col-25">Hours Used</div>
</div>
In my Angular code, I have successfully generated a list in the desired order with Date at the beginning and Hours Used at the end. To translate this into an HTML table, I utilize the following code:
<div class="row">
<div ng-repeat="B in ConvertToTableRow(T) track by $index">
<div class="col col-25" ng-if="$index == 0">
{{ B }}  
</div>
<div class="col col-50" ng-if="$index == 1">
{{ B }}  
</div>
<div class="col col-25" ng-if="$index == 2">
{{ B }}  
</div>
</div>
</div>
While the first row styles correctly according to the assigned specifications, I encountered an issue in styling the second entry (when the index is 1). Despite all efforts to assign a col-50 style, it remains as col-25. The values are correct and data is displayed accurately, yet the styling does not reflect the intended design.
Is it feasible to achieve this particular table styling using Angular and HTML?