How to define the width of expandable panels in Vuetify - vuetify.js

Question

As you can see in the picture my expandable panels do not use the maximum available width.
I want the expandable panels to use the maximum width available in the data table and make the columns fit exactly the width of the header columns. In addition to that it would be great to hide the expand Button (and also make the panel not clickable) if there is not enough data to display. I know that there is a hide-actions prop for that but I do not know how to use that.
My code:
<template>
<div class="table table--fixed-layout d-flex flex-grow-1 overflow-hidden fill-height">
<div v-if="loading" class="d-flex ma-auto">
<v-progress-circular indeterminate color="primary" :width="3" />
</div>
<v-data-table
v-else
item-key="id"
hide-default-footer
fixed-header
disable-sort
:headers="headers"
:items="filteredItems"
:items-per-page="-1"
>
<template #[`header.ticketNumber`]="{ header }">
<data-table-filter :name="header.text" #change="ticketNumberFilter = $event" />
</template>
<template #[`header.title`]="{ header }">
<data-table-filter :name="header.text" #change="titleFilter = $event" />
</template>
<template #[`header.status`]="{ header }">
<data-table-filter
:name="header.text"
:default-values="filterableTicketServiceStatuses"
#change="statusFilter = $event"
>
<template #default="{ value }">{{ getTicketServiceStatusLabel(value) }}</template>
</data-table-filter>
</template>
<template #[`header.hostNames`]="{ header }">
<data-table-filter :name="header.text" #change="hostNameFilter = $event" />
</template>
<template #[`header.creator`]="{ header }">
<data-table-filter :name="header.text" #change="creatorFilter = $event" />
</template>
<template v-slot:body="{ items }">
<v-container fluid>
<tbody v-for="item in items" :key="item.id">
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>
<template v-slot:default="{ open }">
<v-col>
<ticket-number :ticket-number="item.ticketNumber" />
</v-col>
<v-col>
<td class="pl-4">{{ item.title }}</td>
</v-col>
<v-col>
<li v-for="hostName in getFirstFourTicketHostNames(item)" :key="hostName">
<div class="pt-md-2">{{ hostName }}</div>
</li>
<div v-if="item.hosts.length > 4">
<v-fade-transition leave-absolute>
<span v-if="open">
<li v-for="hostName in getRestOfTicketHostNames(item)" :key="hostName">
<div class="pt-md-2">{{ hostName }}</div>
</li>
</span>
</v-fade-transition>
</div>
</v-col>
<v-col>
{{ getTicketServiceStatusLabel(item.status) }}
</v-col>
<v-col>
{{ item.creator }}
</v-col>
<td class="table__date">{{ formatDateTime(item.creationDate) }}</td>
<v-col></v-col>
<v-col>
<td class="table__date">{{ formatDateTime(item.finishedDate) }}</td>
</v-col>
<v-col>
<td class="pl-4">
<v-icon v-if="item.notifyCustomer">{{ icons.mdiCheck }}</v-icon>
</td>
</v-col>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
</v-expansion-panels>
</tbody>
</v-container>
</template>
</v-data-table>
</div>
</template>
How can I achieve that?