Why does table style move out when rendering rows through vue component

Question

When I hardcode rows in my html-table, all styles are OK, but when I render them via Vue component using v-for directive, my columns in the table move out: Here are hardcored 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>
                        <td class="main_table_td column_3">001001</td>
                        <td class="main_table_td column_4">Name</td>
                        <td class="main_table_td column_5">serial-01-02-03</td>
                        <td class="main_table_td column_6">2020-12-20</td>
                        <td class="main_table_td column_7">98547</td>
                        <td class="main_table_td column_8">шт.</td>
                        <td class="main_table_td column_9">77777.77</td>
                        <td class="main_table_td column_10">88888.77</td>
                        <td class="main_table_td column_11">999999999</td>
                        <td class="main_table_td column_12">999999999</td>
                        <td class="main_table_td column_13">2020-12-20 12:20:00</td>
                        <td class="main_table_td column_14"> Supplier Name </td>
                        <td class="main_table_td column_15">Type</td>
                        <td class="main_table_td column_16">Surname Name</td>
                    </tr>
                    <tr class="main_table_tr" >
                        <td class="main_table_td column_1">999999</td>
                        <td class="main_table_td column_2">0000000001</td>
                        <td class="main_table_td column_3">001001</td>
                        <td class="main_table_td column_4">Name</td>
                        <td class="main_table_td column_5">serial-01-02-03</td>
                        <td class="main_table_td column_6">2020-12-20</td>
                        <td class="main_table_td column_7">98547</td>
                        <td class="main_table_td column_8">шт.</td>
                        <td class="main_table_td column_9">77777.77</td>
                        <td class="main_table_td column_10">88888.77</td>
                        <td class="main_table_td column_11">999999999</td>
                        <td class="main_table_td column_12">999999999</td>
                        <td class="main_table_td column_13">2020-12-20 12:20:00</td>
                        <td class="main_table_td column_14"> Supplier Name </td>
                        <td class="main_table_td column_15">Type</td>
                        <td class="main_table_td column_16">Surname Name</td>
                    </tr>
                    <tr class="main_table_tr" >
                        <td class="main_table_td column_1">999999</td>
                        <td class="main_table_td column_2">0000000001</td>
                        <td class="main_table_td column_3">001001</td>
                        <td class="main_table_td column_4">Name</td>
                        <td class="main_table_td column_5">serial-01-02-03</td>
                        <td class="main_table_td column_6">2020-12-20</td>
                        <td class="main_table_td column_7">98547</td>
                        <td class="main_table_td column_8">шт.</td>
                        <td class="main_table_td column_9">77777.77</td>
                        <td class="main_table_td column_10">88888.77</td>
                        <td class="main_table_td column_11">999999999</td>
                        <td class="main_table_td column_12">999999999</td>
                        <td class="main_table_td column_13">2020-12-20 12:20:00</td>
                        <td class="main_table_td column_14"> Supplier Name </td>
                        <td class="main_table_td column_15">Type</td>
                        <td class="main_table_td column_16">Surname Name</td>
                    </tr>
                </table>

Here are rendered rows:

 <table class="table_body">
  <tr class="main_table_tr" is="app-skuins" :list-of-rows="listOfRows"></tr>
 </table>

And a template which I render to:

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>
                        <td class="main_table_td column_3">001001</td>
                        <td class="main_table_td column_4">Name</td>
                        <td class="main_table_td column_5">serial-01-02-03</td>
                        <td class="main_table_td column_6">2020-12-20</td>
                        <td class="main_table_td column_7">98547</td>
                        <td class="main_table_td column_8">шт.</td>
                        <td class="main_table_td column_9">77777.77</td>
                        <td class="main_table_td column_10">88888.77</td>
                        <td class="main_table_td column_11">999999999</td>
                        <td class="main_table_td column_12">999999999</td>
                        <td class="main_table_td column_13">2020-12-20 12:20:00</td>
                        <td class="main_table_td column_14"> Supplier Name </td>
                        <td class="main_table_td column_15">Type</td>
                        <td class="main_table_td column_16">Surname Name</td>
                    </tr> 
 <tr class="main_table_tr" >
                        <td class="main_table_td column_1">999999</td>
                        <td class="main_table_td column_2">0000000001</td>
                        <td class="main_table_td column_3">001001</td>
                        <td class="main_table_td column_4">Name</td>
                        <td class="main_table_td column_5">serial-01-02-03</td>
                        <td class="main_table_td column_6">2020-12-20</td>
                        <td class="main_table_td column_7">98547</td>
                        <td class="main_table_td column_8">шт.</td>
                        <td class="main_table_td column_9">77777.77</td>
                        <td class="main_table_td column_10">88888.77</td>
                        <td class="main_table_td column_11">999999999</td>
                        <td class="main_table_td column_12">999999999</td>
                        <td class="main_table_td column_13">2020-12-20 12:20:00</td>
                        <td class="main_table_td column_14"> Supplier Name </td>
                        <td class="main_table_td column_15">Type</td>
                        <td class="main_table_td column_16">Surname Name</td>
                    </tr> 
 <tr class="main_table_tr" >
                        <td class="main_table_td column_1">999999</td>
                        <td class="main_table_td column_2">0000000001</td>
                        <td class="main_table_td column_3">001001</td>
                        <td class="main_table_td column_4">Name</td>
                        <td class="main_table_td column_5">serial-01-02-03</td>
                        <td class="main_table_td column_6">2020-12-20</td>
                        <td class="main_table_td column_7">98547</td>
                        <td class="main_table_td column_8">шт.</td>
                        <td class="main_table_td column_9">77777.77</td>
                        <td class="main_table_td column_10">88888.77</td>
                        <td class="main_table_td column_11">999999999</td>
                        <td class="main_table_td column_12">999999999</td>
                        <td class="main_table_td column_13">2020-12-20 12:20:00</td>
                        <td class="main_table_td column_14"> Supplier Name </td>
                        <td class="main_table_td column_15">Type</td>
                        <td class="main_table_td column_16">Surname Name</td>
                    </tr>       
        </div>`,

SOLVED: So, the tbody option really helped:

This is what in HTML page:

<table class="table_body">
   <tbody is="app-skuins" :list-of-rows="listOfRows"></tbody>
</table>

This is what I render through 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>
        <td class="main_table_td column_3">{{row.sku.code}}</td>
        <td class="main_table_td column_4">{{row.sku.name}} </td>
        <td class="main_table_td column_5">{{row.serial}} </td>
        <td class="main_table_td column_6">{{row.expireDate}} </td>
        <td class="main_table_td column_7">{{row.qty}}</td>   
        <td class="main_table_td column_8">{{row.sku.unit.unit}}</td>  
        <td class="main_table_td column_9">{{row.price}}</td>  
        <td class="main_table_td column_10">{{row.vatPrice}}</td>  
        <td class="main_table_td column_11">{{row.total}}</td>  
        <td class="main_table_td column_12">{{row.vatTotal}}</td>  
        <td class="main_table_td column_13">{{row.inDoc.docDate}}</td>  
        <td class="main_table_td column_14">{{row.inDoc.contractor.name}}</td>  
        <td class="main_table_td column_15">{{row.inDoc.type.docType}}</td>  
        <td class="main_table_td column_16">{{row.inDoc.owner.fullName}}</td>         
        </tr>        
        </tbody>`,

Thanks a lot everyone!

I'm not familiar with Vue templates but there is one thing that stands out along with one question. First, unless vue requires it, why wrap your TR with a div? The question is do you have the correct number of columns compared to your input row above? — imvain2
Vue requires one root element when rendering component template, that's why I you can’t do without <div>. I also thought that the problem was in this <div>, so I hardcoded div element too when I hardcoded my rows. And its presence does not affect the style when I hardcod rows. Yes, number of columns corresponds of course — Rodriguez
You're going to need to inspect the generated DOM and compare the two cases to establish what the difference is. The only other thing that catches my eye is the class main_table_tr, which you should probably remove from the outer template because it'll be applied to the wrong element of the child. — skirtle

puelo puelo · Accepted Answer · 2020-05-15T20:19:12

This probably happens because it renders invalid HTML. Your template contains a <div> as parent of <tr> which is invalid. Check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr (under "Permitted parents")

Why does table style move out when rendering rows through vue component

2 Answers