How to create an exchange-like progress bar behind data-table elements? [Vue/Vuetify]

Question

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

Answer 1

I made it using a background property on the template elements:

<tr :style="{'background-image': 'linear-gradient(to left, rgba(255, 59, 105, 0.25), rgba(255, 59, 105, 0.25) '+item.percentage+'%, rgba(0, 0, 0, 0) '+item.percentage+'%)'}">
  <td class="text-start items-ask">{{item.ask}}</td>
  <td class="text-center items-quantity">{{item.quantity}}</td>
</tr>

Thank you folks!