Here is how my table currently looks with the implementation in place:
https://i.sstatic.net/b7onC.png
Since my data is displayed vertically, I am interested in adding stripes to the columns or implementing some CSS hovering effect when the mouse is over a column.
This is the code pertaining to the table mentioned above:
<div class="table-responsive">
<table class="table table-sm table-bordered">
<thead>
<tr>
<th>
Properties
</th>
<th *ngFor="let row of tableResult?.rows; let i=index" scope="col">
Result #{{i+1}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let column of tableResult?.columns; let cind=index">
<th scope="row">{{column}}</th>
<td *ngFor="let row of tableResult?.rows">{{row[cind]}}</td>
</tr>
<tr>
<th>More Info.</th>
<td scope="row" *ngFor="let uuid of tableResult?.uuids">
<button class="btn btn-xs btn-outline-success">
More
</button>
</td>
</tr>
</tbody>
</table>
</div>
I am uncertain about whether I need to include colgroup to enhance column recognition.
Does Bootstrap offer a class to add stripes to columns? If not, what would be the CSS approach to highlighting them?