I am working on a table that combines 2 separate tables.
<div>
<div>
<table>
<colgroup>
<col style="width:95px" />
<col style="width:95px" />
<col style="width:95px" />
<col style="width:95px" />
<col style="width:95px" />
</colgroup>
<tr class="header">
<th colspan="2">Header1</th>
<th colspan="3">Header2</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
<th>data4</th>
<th>data5</th>
</tr>
</table>
</div>
</div>
<div>
<table>
<colgroup>
<col style="width:95px" />
<col style="width:95px" />
<col style="width:95px" />
<col style="width:95px" />
<col style="width:95px" />
</colgroup>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</table>
</div>
My goal is to be able to click on a cell in the first header row and collapse all columns in the group except the first one. For example, clicking on Header2 should hide data4 and data5 columns while showing only the data3 column. Clicking again would reveal all the hidden columns back.
Is it possible to achieve this functionality using only Angular and CSS without relying on jQuery?
Thank you, Chen