I am working on creating a simple table in Vue.js with Bootstrap. When the arrow is clicked, the child row is displayed, and I want it to appear below the parent row. I achieved this by setting
display:flexbox; flex-direction:column;Here is the HTML table:
<table>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
...
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr class="parent" v-for="item in data" :key="item.data.ID">
<td>
...
</button>
</td>
...
<td>{{ item.data['Knows the answer?'] }}</td>
...
</button>
...
</td>
<template v-if="item.children && item.children.has_nemesis && Array.isArray(item.children.has_nemesis.records) && item.children.has_nemesis.records.length && item.childrenVisible">
...
<td >{{ secret.data['Secrete Code'] }}</td>
...
...
</tbody>
</table>
However, this layout caused the parent rows not extend full length (see image) https://i.stack.imgur.com/UL2k0.png
Applying CSS:
table {
border: 5px solid red !important;
display: flex;
flex-direction: column;
}
thead{
border: 5px solid blue;
}
tbody{
...
}
.parent{
...
}
td{
...
}
Visual reference: https://i.stack.imgur.com/gDtwF.png