When I insert rows manually into my HTML table, all the styles look great. However, when I use Vue components with the v-for directive to render the rows, the columns in the table shift around. Here are the hardcoded rows:
<table class="table_body">
<tr class="main_table_tr" >
<td class="main_table_td column_1">999999</td>
<td class="main_table_td column_2">0000000001</td>
... (remaining content unchanged)
</tr>
<tr class="main_table_tr" >
<td class="main_table_td column_1">999999</td>
<td class="main_table_td column_2">0000000001</td>
... (remaining content unchanged)
</tr>
... (repeated rows omitted for brevity)
</table>
Here are the rendered rows:
<table class="table_body">
<tr class="main_table_tr" is="app-skuins" :list-of-rows="listOfRows"></tr>
</table>
And here's the template that gets rendered:
template: `<div>
<tr class="main_table_tr" >
<td class="main_table_td column_1">999999</td>
<td class="main_table_td column_2">0000000001</td>
... (remaining content unchanged)
</tr>
<tr class="main_table_tr" >
<td class="main_table_td column_1">999999</td>
<td class="main_table_td column_2">0000000001</td>
... (remaining content unchanged)
</tr>
... (repeated rows omitted for brevity)
</div>`,
https://i.sstatic.net/FlQGW.jpg
https://i.sstatic.net/FU9K6.jpg
SOLVED: After using the tbody option, the issue was resolved:
This is what is in the HTML page now:
<table class="table_body">
<tbody is="app-skuins" :list-of-rows="listOfRows"></tbody>
</table>
And this is how it looks when rendered through the Vue component:
template: `<tbody>
<tr class="main_table_tr" v-for="(row, index) in listOfRows">
<td class="main_table_td column_1">{{index + 1}}</td>
<td class="main_table_td column_2">{{row.inDoc.docNumber}}</td>
... (remaining content unchanged)
</tr>
</tbody>`,
Many thanks to everyone who helped!