Currently, I am dynamically creating a table that will remain the same size. However, to keep my code neat and organized, I prefer not to create it statically. I am familiar with how to achieve this using a static table.
The table I want to create should look similar to this: table
In my code, I have defined a table class called "tableClass" and a td class named "activeCell."
Here are some methods I've tried:
- I attempted adding an id to each td and then creating custom CSS for each id.
- I used ".activeCell:nth-child()" but found that it applied the style to the entire column rather than just the individual cell (td).
- I also tried assigning an id to each cell and then using ".activeCell#id," but saw no visible change in styling.
- Additionally, I tested using "td:nth-child()" which did not produce any visible changes.
I am working with Angular as well. If there is a more convenient or simpler way to accomplish this task, I am open to using mat-table or Bootstrap (though I am unsure of how to style the table using those frameworks).
Your assistance would be greatly appreciated.
Below is a snippet of my HTML code:
<table class="miniGame">
<tr>
<td class="activeCell" *ngFor='let cell of grid | slice:0:3; let i=index' (click)='markCell(cell.id)'
id={{cell.id}}
[ngClass]="{inactive: !cell.isActive}">
{{ cell.value }} A
</td>
</tr>
<tr>
<td class="activeCell" *ngFor='let cell of grid | slice:3:6; let i=index' (click)='markCell(cell.id)'
[ngClass]="{inactive: !cell.isActive}">
{{ cell.value }} B</td>
</tr>
<tr>
<td class="activeCell" *ngFor='let cell of grid | slice:6:9; let i=index' (click)='markCell(cell.id)'
[ngClass]="{inactive: !cell.isActive}">
{{ cell.value }} C </td>
</tr>
</table>
And here is a snippet of my CSS:
.activeCell{
width: 100px;
height: 100px;
cursor: pointer;
border-top: 2px solid black;
border-right: 2px solid black;
}
.activeCell:hover{
background: rgb(79, 77, 223)
}
.miniGame{
border-collapse: collapse;
}