How to display the below given data row wise? - html

Question

How to change below html to required format as in below image when I get dynamic data?
<div id="pdfTable" #pdfTable style="display: none;">
<table class="table table-borderless mb-0" style="font-size:14px;margin-bottom: 15px;">
<thead>
<tr>
<td style="border:0"><b>Rating Scale: </b></td>
<td style="border:0" colspan="4"></td>
</tr>
<tr *ngFor='let rating of ratings'>
<td colspan="5" style="border:0"><b>{{rating.ratingId}}</b><span>.
</span><b>{{rating.ratingName}}</b></td>
</tr>
</thead>
</table>
</div>
Required Format
What I am getting from above html
Change html to format which is Shown in Required Format image dynamically.

Answer 1

Your current markup creates a new <tr> (table row) for each rating. But your design shows you want two cells:
one with "Rating Scale:"
one with the actual ratings.
In the second column, I used a CSS columns layout, with two columns.
The rest are details.
Template:
<div id="pdfTable" #pdfTable style="display: none">
<table
class="table table-borderless mb-0"
style="font-size: 14px; margin-bottom: 15px"
>
<tbody>
<tr>
<td>Rating Scale:</td>
<td>
<div class="ratings">
<div *ngFor="let rating of ratings">
<div>{{ rating.ratingName }}.</div>
<div>{{ rating.ratingName }}</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
SCSS:
#pdfTable {
border: 2px solid black;
td {
border: none;
font-weight: bold;
&:first-child {
vertical-align: top;
white-space: nowrap;
}
}
.ratings {
columns: 2;
& > div {
font-weight: bold;
break-inside: avoid;
display: flex;
& > div:first-child {
flex: 0 0 2rem;
text-align: right;
padding-right: 0.5rem;
}
& > div:last-child {
flex-grow: 1;
}
}
}
}
You might need to tweak the CSS a bit in terms of margins/paddings, according to your project.
Rough demo of the output (just the HTML and CSS, no angular):
#pdfTable {
border: 2px solid black;
font-size: 14px;
}
#pdfTable td {
border: none;
font-weight: bold;
}
#pdfTable td:first-child {
vertical-align: top;
white-space: nowrap;
}
#pdfTable .ratings {
columns: 2;
}
#pdfTable .ratings > div {
font-weight: bold;
break-inside: avoid;
display: flex;
}
#pdfTable .ratings > div > div:first-child {
flex: 0 0 2rem;
text-align: right;
padding-right: 0.5rem;
}
#pdfTable .ratings > div > div:last-child {
flex-grow: 1;
}
<div id="pdfTable" #pdfTable>
<table>
<tbody>
<tr>
<td>Rating Scale:</td>
<td>
<div class="ratings">
<div>
<div>5.</div>
<div>Outstanding</div>
</div>
<div>
<div>4.</div>
<div>Excellent-exceeds expectations</div>
</div>
<div>
<div>3.</div>
<div>Competent-acceptable proficiency</div>
</div>
<div>
<div>2.</div>
<div>Below average - does not meet requirements</div>
</div>
<div>
<div>1.</div>
<div>Unable to determine or not applicable to this candidate</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>