I've got an HTML table that's being created using templates, and it currently looks like this:
<table>
<thead>
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
</thead>
<tbody>
{{#each []}}
<tr>
<td>{{this.val1}}</td>
<td>{{this.val2}}</td>
<td>{{this.val3}}</td>
<td>{{this.val4}}</td>
</tr>
{{/each}}
</tbody>
My goal is to customize the design of the table using a CSS file that contains styling rules for each cell data. Here's an example of what's in the CSS file:
.newCell70 div {
width: 66px;
text-align: right;
}
.cell80 div {
width: 76px;
}
.newCell80 div {
width: 76px;
text-align: right;
}
.cell90 div {
width: 86px;
}
I have numerous cells with different designs in my table. How can I ensure that each cell generates with its specific design parameters?