Vuetify: [Bug Report] Data-table headers width doesn't work

[vcastro45]

Versions and Environment

Vuetify: 1.2.2
Vue: 2.5.17
Browsers: Chrome 69.0.3497.81
OS: Windows 10

Steps to reproduce

Create a data-table and add a "width" attribute to a header object

Expected Behavior

The column corresponding to the header object with the "width" attribute must have the desired width.

Actual Behavior

The width attribute is added to the DOM but this HTML attribute is deprecated for HTML5 and does nothing (cf: https://www.w3schools.com/TAGS/att_th_width.asp)

Reproduction Link

https://codepen.io/anon/pen/wEyZwN?editors=1010

Other comments

The suggested work-around provided by W3C that say to use the "width" CSS property doesn't work for this component.

[bestickley]

If you remove the <v-flex> from your codepen it works.
I had a similar problem where the width I set in my headers array wasn't affecting the columns. The fix I found was increasing the width on the <v-card> component my datatable was inside of

[WhatFreshHellIsThis]

Yes, removing the v-flex around it fixes the issue but then the whole layout is broken!? What to do?

[saitam1]

I am not using v-flex, but it doesn't work either!

<template>
    <div>
        <v-container class="my-5">
            <v-data-table></v-data-table>
        </v-container>
    </div>
</template>

Inside headers I tried to set width as follows: width: '20%', width: '100px', width: '150', but none of them had an impact on the data tables header width

[wobsoriano]

@saitam1 Do you have a fix for this already? Adding width keys to the headers array is not working. Setting a class also is not working. This is a long time issue already.

I hope someone share their solution...

[CodeMonkeyG]

I spent hours fighting this today. Nearly lost my mind. The fix for me?

<v-data-table class="my-awesome-table"></v-data-table>

<style>
  .my-awesome-table{
    table-layout : fixed;
  }
</style>

Suddenly the widths in the header configs were honored.

[360hnjd-fe]

Not repaired yet?

[huynd8295]

I have the same problem, the width attribute doesnt seem to work at all.

[guastallaigor]

Same here, table-layout: fixed didn't work in my case for some reason. Any other workaround?

[laurengranada]

My Before:

My After:

my code:

<v-data-table ... class="mi-dataTable elevation-1">
    <template slot="headers" slot-scope="props">
         <tr class="mid-headercell">
             <th class="midh-text"  v-for="header in props.headers"
                >{{header.text}}
             </th>
         </tr>
     </template>
     <template v-slot:items="props">
           <td class-"mid-item">{{props.item.desc}}</td>
            ....
    </template>
</v-data-table>

and the css that fixed my problem!:

table-layout: fixed as well as the padding: 0px for my headercell

.mi-dataTable{
     table-layout: fixed;
     .mid-headercell{
            text-align: left;
            background-color: $blue_accent;
            .midh-text{
                    padding: 0px;
                    padding-left: 2.5%;
                    color: white;
                    font-weight: 400;
             }
      }
}

Hope this helps someone else!

[hlohrenz]

So the thing that solved it for me was adding this styling to the th tags inside the table's header:

table.v-table
  thead
    th
      white-space: normal // Default was nowrap which was causing the headers to not shrink down

My width's were then respected.

headers: [
  { text: 'Account', value: 'name', sortable: true, width: '20%' },
  { text: 'Type', value: 'deliverable', sortable: true, width: '20%' },
  { text: 'Progress', value: 'progress', sortable: true, align: 'center', width: '10%' },
  { text: 'Delivery Date', value: 'design_delivered_at', sortable: true, align: 'center', width: '5%' },
  { text: 'Research or Design Rating', value: 'ratings', sortable: false, align: 'center', width: '20%' },
  { text: 'Reported Revenue', value: 'dollars', sortable: true, align: 'center', width: '10%' },
  { text: 'View', value: 'name', sortable: false, align: 'center', width: '5%' },
  { text: 'Request Edits', value: 'name', sortable: false, align: 'center', width: '5%' },
  { text: 'Created For', value: 'name', sortable: false, align: 'center', width: '5%' }
]

[getsong]

This works for me:

headers: [
          {value: 'index', text: '#', sortable: false, width: '5%'},
          {value: 'id', text: 'Id', width: '5%'},
          {value: 'headerA', text: 'headerA', width: '10%'},
          {value: 'headerB', text: 'headerB', width: '10%'},
          {value: 'headerC', text: 'headerC', width: '12%'},
          {value: 'headerD', text: 'headerD', width: '12%'},
          {value: 'headerE', text: 'headerE', width: '6%'},
          {value: 'headerF', text: 'headerF', width: '12%'},
          {value: 'headerG', text: 'headerG', width: '18%'}
]

Here is the css that make it work:

<style>
  .class-on-data-table table {
    table-layout: fixed;
  }
</style>

css <style> should not be scoped in order to style the table element, which is a in child component.

[ricardovanlaarhoven]

Will this issue get fixed for 1.5 or only 2.0 ?

[allochi]

It doesn't work for me too, I had to wrap the content with a div and set its width with a style

<td>
    <div style="width: 300px">...</div>
</td>

not the best solution, but it works for now.

[WhatFreshHellIsThis]

Serious bug in major component over 8 months old now, can this be prioritized higher?

[nekosaur]

Prioritization happens based on the availability of contributors. PRs are always welcome.

[Oscarz90]

It doesnt work, I've tried many of the options published here

[nekosaur]

Repro in 2.0 https://codepen.io/gilderbairn/pen/rXOyWL

[klaveren]

I have used windows size to fix this problem.

vue:
<v-container v-resize="onResize"> <v-card :width="windowSize.x"> <v-data-table /> </v-card> </v-container>

js:
data() { return { search: '', headers: [], windowSize: { x: 0, y: 0, } } }, mounted () { this.onResize() }, methods: { onResize () { this.windowSize = { x: window.innerWidth, y: window.innerHeight } } }

[kajirikajiri]

<td style="min-width:55px;width:55px;max-width:55px"></td>

[ijunaid8989]

nothing works

[ElSamhaa]

why has this been closed?

[jacekkarczmarczyk]

Because it's fixed

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.

[ElSamhaa]

@jacekkarczmarczyk sorry to bother you, but in my own experience, the issue was not resolved even once and I don't think this is a regression. I am still experiencing the non-honored widths without the suggested table-layout: fixed.

I'll post a working link to my code.

[iec989]

Same thing here, it doesn't look like it's been solved

[jacekkarczmarczyk]

https://github.com/vuetifyjs/vuetify/issues/5072#issuecomment-705701103

[nmalchy]

Not working for me as well, using "vuetify": "^2.3.3", do I need to upgrade or should it have been fixed prior to this version?