Vuetify v-data-table width

I use vuejs and v-data-table of vuetify.
My problem is that the table has only the 1/3 width of the parent div and it needs a scrollbar.
How can I set the table to have the 100% of the width of the parent div?
This is the code of App.vue the table is inside the <v-app id="inspire" >

<template>

    <div >

        <div class="leftDiv">
            <div class="custom-select" style="width:200px;">
                <select v-model="mcompetitor" >
                    <option v-for="comp in competitors" :value="comp.id">{{comp.name}}</option>
                </select> <button v-on:click="mycomp()">Load Categories</button>
            </div>
            <div class="custom-select" style="width:200px;">
                <select v-model="mcat">
                    <option v-for="cat in categories" :value="cat.id">{{cat.name}}</option>
                </select> <button v-on:click="mycat()">Load Products</button>

                <v-app id="inspire" >
                    <v-data-table
                        v-model="selected"
                        :headers="headers"
                        :items="mproduct"
                        calculate-widths
                        item-key="id"
                        show-select
                        class="elevation-1 "
                        >
 
                    </v-data-table>
                </v-app>

                <!-- <div id="products">
                   <div v-for="pr in mproduct">{{pr.name}}
                       <input type="checkbox" id="pr.id" :value="pr.id" v-model="checkedProducts"/>
                   </div>   
               </div>-->

            </div>

        </div>

        <div class="rightDiv">
            <div class="custom-select" style="width:200px;">
                <select v-model="clCats">
                    <option v-for="cat in clientCats" :value="cat.name">{{cat.name}}</option>
                </select> 
                <button v-on:click="myclient()">select</button>
            </div> 
            <div id="clientcats">
                <div v-for="(pr,index) in checkedCats">{{pr.name}}
                    <input type="checkbox"  :value="pr.name" v-model="checkedClientCats"/>
                    <button @click="myclientremove(index)">-</button>
                </div>   
                <div>
                    <button @click="msend">Save</button>
                </div>
            </div>  

        </div>


    </div>
</template>

<style>
   
    .myActiveBtn{
        /* background-color: green;*/
    }
    .leftDiv {
        background-color: #efefef;
        color: #000;
        height: 800px;
        width: 52%;
        float: left;
    }
    .rightDiv {
        background-color: #efefef;
        color: #000;
        height: 800px;
        width: 40%;
        float: right;
    }
</style>

This is not my area but just checking you know that your #inspire is inside the .custom-select div which you have only given 200px width?

If it’s supposed to be there then giving the table width:100% should make it equal to its parent’s 200px width. Also html tables can’t have scrollbars (if that’s what your code produces) and you would need a parent div around an html table and put the scrollbars on that with overflow:auto and a physical width/height as appropriate.

If that’s not the issue then I have no knowledge of vuetify so someone else will have to jump in :slight_smile:

(off-topic: consider using flexbox instead of floats as it will make life easier in the long run ;))