I'm making an exchange book simulator for some cryptocurrencies, and I need to make the progress bar that is behind the values of a table.

My data-table that receives the data has the following template:

                    <v-data-table
                        :headers="headers_ask"
                        :items="book_item[1]"
                        class="transparent data-table-books-asks ml-3 mr-3"
                    >
                      <template v-slot:item="{item}">
                          <tr>
                            <td>{{item.ask}}</td>
                            <td>{{item.quantity}}</td>
                          </tr>
                      </template>
                    </v-data-table>

How can I create this progress bar on data-table elements without affecting the layout of the template? Note: if I create a div or other tag between that template the items do not match the header