0

sample table 1

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

majjade
  • 38
  • 4

4 Answers4

0

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>
NoOorZ24
  • 2,914
  • 1
  • 14
  • 33
0

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>
Charles Lavalard
  • 2,061
  • 6
  • 26
0
<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.

majjade
  • 38
  • 4
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 20 '22 at 12:35
0

Use this data table

https://www.npmjs.com/package/data-table-vue-v3

it has some many advance features and completely free!

compatible with vue 2 and vue 3 both

Rahul
  • 710
  • 1
  • 8
  • 25