[Vuejs]-Decrease header width of datatable in Vuetify

by

0đź‘Ť

Specify a minimal width member in your headers:

     {text: "Title", value: "title", align: "left", width: "1px"},

The table will try to make things that wide, but it is constrained by the width of table content and header content. It will ensure that it can display them.

Table headers have white-space set to no-wrap. You can get the “Duration, minutes” column narrower by overriding that:

.elevation-1 thead tr th {
  white-space: normal;
}

You can let things get a little uglier by allowing words to break between letters:

.elevation-1 thead tr th {
  white-space: normal;
  word-break: break-all;
}

Finally, though I’m pretty sure you don’t want to do this, you can set the display of the th to inline-block, and the headers will be sized as you specify, but will display independent of their columns.

.elevation-1 thead tr th {
  display: inline-block;
  white-space: normal;
}

Leave a comment