I am currently utilizing the VuetifyJS Data Table and I'm looking for a way to reduce the spacing between the entries in each header cell. Adding a width to each header did not achieve the desired result, as it seems there is a minimum predefined width that cannot be bypassed.
Update: The desired layout should have a fixed margin of 10px between each row: https://i.sstatic.net/tLGSV.png
For reference, here is an example on CodePen here.
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template slot="headerCell" slot-scope="props">
<v-tooltip bottom>
<span slot="activator">
{{ props.header.text }}
</span>
<span>
{{ props.header.text }}
</span>
</v-tooltip>
</template>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</v-app>
</div>
Is there a way to bring them closer together?