Как изменить ширину столбца?

Question

[Richard Millie]

Как поменять ширину столбца <v-data-table> (это Vuetify)? В документации не нашёл.

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

Answer 1

[0xD34F]

Свойство width у элементов headers. Число или строка. Если число - это пиксели. Если строка - доступны все единицы измерения css (значение подставляется в style соответствующего th).

В документации не нашёл.

Я бы скорее поверил в "не нашёл документацию". Чего там можно было не найти - без понятия, всё на поверхности лежит (в блоке API: компонент v-data-table, вкладка props - выбраны по умолчанию, достаточно просто скроллить вниз и читать, какой параметр за что отвечает - неужели это так сложно?).

Comments

[Richard Millie]

Спасибо за ответ. А как применить свойство width у элементов headers? Куда его вписать?

Answer 2

[Игорь Васильев]

Если используете Bootstrap, или ваша таблица width:100%;
самое разумное, что вы можете сделать, это растянуть ячейку таблицы <td>...</td>
самим контентом.

Очевидно этот вопрос возник, из-за того что таблица игнорирует ширину столбца, даже если её задать шапке.

Не забудьте элементу дать фиксированную ширину (длину), и display: block;
Или table, в идеале, если таблица будет собираться из массива, тогда вы в цикле укажете один элемент со свойствами контента, который размножится и даст одинаковую ширину у конкретного столбца. Я не знаю всей ситуации, но иногда лучше строить контент на grid или flex, потому что в мобильной версии сайта или приложения таблица может не влезть, и придётся делать нижний скролл, а если таблица на "гридах" или "флексах" то это можно обыграть на @media (...) CSS
Может кому пригодится: https://1linelayouts.glitch.me/
Успехов !