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" >


    <div >

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

                <v-app id="inspire" >
                        class="elevation-1 "

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



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



        /* 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;

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 ;))

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.