Change the default width of a VuetifyJS DataTable cell

I'm using the VuetifyJS Data Table and I need to move the entries of each header cell as close as possible to each other. I tried to add a width to each header but that didn't work - it seems there is a predefined width one can't go below.

Update: This is how it should look like - the margin between each row should be fixed at 10px:

Here is a CodePen example:

https://codepen.io/anon/pen/ejEpKZ?&editors=101

 <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">
            
          </span>
          <span>
            
          </span>
        </v-tooltip>
      </template>
      <template slot="items" slot-scope="props">
        <td></td>
        <td class="text-xs-right"></td>
        <td class="text-xs-right"></td>
        <td class="text-xs-right"></td>
        <td class="text-xs-right"></td>
        <td class="text-xs-right"></td>
      </template>
    </v-data-table>
  </v-app>
</div>

How to get them close together?

from Change the default width of a VuetifyJS DataTable cell