Format table to show data in correct columns and rows

Question

I am trying to create a table that places all the answers that the user has answered by buying a ticket under the correct questions, and if they haven't answered then show the dash symbol.

The problem is that if there are more than on tickets that the user has purchased then the answers get all messed up.

Example:

So, for this the number should go under 'Mobile Num?' in the same row as 'Free 2' and 'Male', 'Aadil' and '20' should go under 'Gender?', 'Name?' and 'Age?' in the same row as Free.

This is my HTML:

<template>
    <fragment>
        <tr>
            <td :rowspan="countArray + 1">
                <img :src="user.profile_image">
            </td>

            <td :rowspan="countArray + 1">
                {{user.first_name + " " + user.last_name}}
            </td>

            <td :rowspan="countArray + 1">
                <div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
                    <td>
                        {{nameTick}}
                    </td>
                </div>
            </td>
        </tr>

        <tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
            <td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
                {{ans.answer}}
            </td>
        </tr>
    </fragment>
</template>

This is my JS:

beforeMount: function() {
        this.$axios.$get(`/user/${this.userId}`).then(response => {
            this.user = response
        });

        for (let i = 0; i < this.ticketName.tickets.length; i++) {
            this.tickets_name = this.ticketName.tickets[i].ticket_name;
            this.countArray = this.ticketName.tickets[i].count;
            this.name.push(this.tickets_name);
        };
    },

    watch: {
        tickets: {
            handler: function(val) {
                for (let x = 0; x < val.length; x++) {
                    this.$axios.$get(`/ticket/${val[x].id}/answer`).then(response => {

                        for (let i = 0; i < response.questions.length; i++) {
                            this.userAnswered = response.questions[i];

                            this.answered.push(this.userAnswered.answer);
                        }
                        console.log(response)
                        this.allQuestions = this.ticketAns.push(response);
                    })
                }
                // this.userAnswers.push(this.ticketAns);
                this.userAnswers.push(this.answered);
            }
        }
    }

If someone can help it would be much appreciated.

Answer 1

Remove the <td> inside <td>, after that use a <div> with grids and css to organize inside the <div>.

<template>
        <fragment>
            <tr>
                <td :rowspan="countArray + 1">
                    <img :src="user.profile_image">
                </td>

                <td :rowspan="countArray + 1">
                    {{user.first_name + " " + user.last_name}}
                </td>

                <td :rowspan="countArray + 1">
                    <div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
                        <div class="ui grid">
                            {{nameTick}}
                        </div>
                    </div>
                </td>
            </tr>

            <tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
                <td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
                    {{ans.answer}}
                </td>
            </tr>
        </fragment>
    </template>