I'm attempting to create a table similar to the one shown in the image below using HTML5.
In this table, there is a multi-dimensional matrix with Class A and Class B highlighted in yellow. Each class has three modes (highlighted in blue), and each mode has different parameter values (highlighted in green). The grey cells contain the values for all possible combinations.
The sizes of the modes and parameters are unknown beforehand but are consistent between Class A and Class B. I want to use ng-repeat to dynamically populate the vertical and horizontal headers of the table, adjusting column and row spans as needed.
My main challenge lies in creating the header for Class A and properly utilizing rowspan for the modes and parameters.
I initially attempted nested tables, but alignment issues arose between the grey cells and headers. Here's the code snippet I used:
<table class=" table-bordered">
<tbody>
<tr>
<td></td>
<td>
<table class=" table-bordered">
<tbody>
<tr>
<td colspan="{{getTotalNumCombinations()}}">class B</td>
</tr>
<tr>
<td colspan="{{params.length}}" ng-repeat="m in modes track by $index">{{m}}</td>
</tr>
<tr>
<td ng-repeat="i in getCombinationsArray() track by $index">{{params[getModule($index)]}}</td>
</tr>
</tbody>
</table>
</td>
</tr>>
...
Since the nested approach didn't align correctly, I explored an alternative method without nesting:
<table class=" table-bordered">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="{{getNumCombinations()}}">class B</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="{{params.length}}" ng-repeat="m in modes track by $index">{{m}}</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td ng-repeat="i in getCombinationsArray() track by $index">{{params[getModule($index)]}}</td>
</tr>
<tr>
<td rowspan="{{getNumCombinations()}}">class A </td>
<td ng-repeat="m in modes">{{m}}</td>
</tr>
</tbody>
</table>
Unfortunately, this second method also faced limitations and did not provide the desired outcome.
As a result, I am seeking alternative approaches or solutions that may address these challenges. Feel free to check out the Plunker link showcasing both versions.