How to change column width?

Question

css

How to change column width <v-data-table>(this is Vuetify)? I didn't find it in the documentation.

<v-data-table
        :headers="someHeaders"
        :items="someItems"
        :items-per-page="7"
        class="table"
      >

Answer 1

The width property of the headers elements. Number or string. If the number is pixels. If string - all css units are available (the value is substituted in the style of the corresponding th).
I'd rather believe in "didn't find the documentation". What could not be found there - no idea, everything lies on the surface (in the API block: the v-data-table component, the props tab - are selected by default, just scroll down and read which parameter is responsible for what - is it really so difficult ?).

Answer 2

If you're using Bootstrap or your table width:100%;
, the smartest thing you can do is stretch the table cell with <td>...</td>
the content itself .
Obviously this question arose because the table ignores the column width, even if it is set to the header .
Do not forget to give the element a fixed width (length), and display: block;
Or table, ideally, if the table will be collected from an array, then you will specify one element with content properties in the loop, which will multiply and give the same width for a particular column. I don't know the whole situation, but sometimes it's better to build content on gridorflex, because in the mobile version of the site or application, the table may not fit, and you will have to do a bottom scroll, and if the table is on "grids" or "flexes", then this can be beaten on @media (...) CSS
Maybe someone will come in handy: https://1linelayouts.glitch.me/
Good luck!