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">
            {{ 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>

How to get them close together?

回答1:

You can add another empty header and set width of every column to min value(1%), except empty to make it fill all free space. Also you need to add empty td to table body template to make grey row dividers visible.

See codepen: https://codepen.io/anon/pen/WKXwOR