html table not working properly when using reactive data in vue 3-CodePudding

Hi! I wanted to produce a table (see sample table 1for reference). I'm using this code:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td rowspan="3">test</td>
    <tr>
        <td>test 1</td>
        <td>test 1</td>
    </tr>
    <tr>
        <td>test 1</td>
        <td>test 1</td>
    </tr>
  </tr>
</table>

But once I use a reactive data like <td>{{country}}</td> to populate the rows, the rows is collapsing.

collapsed table

Can someone please help me with this. By the way I'm using Vue 3

CodePudding user response：

Your nesting is incorrect. Don't use tr as child of tr

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td rowspan="2">test</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
</table>

CodePudding user response：

You cannot have <tr> directly in another <tr> this question

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid grey;
}

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td rowspan="2">test</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
</table>

CodePudding user response：

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr v-for="company in companies" :key="company.id">
    <td :rowspan="company.countries.length 1">{{company.name}}</td>
    <template v-for="country in countries" :key="country.id">
      <tr>
        <td>{{country.contact}}</td>
        <td>{{country.name}}</td>
      </tr>
    </template>
  </tr>
</table>

data(){
 return {
   companies: [
     id: 123
     name: 'test',
     countries: [
       {
        id: 1,
        contact: '0123465',
        name: 'Singapore'
       },
       {
        id: 2,
        contact: '0123465',
        name: 'Myanmar'
       },
     ]
   ]
 }
}

This is my first try, that's why i used tr beside td lol. Thank you all, I'll be experimenting how i can achieve my desired output with the correct syntax.