title: Change the default width of a VuetifyJS DataTable cell
body: <p>I'm using the <a href="https://vuetifyjs.com/en/components/data-tables#introduction" rel="nofollow noreferrer">VuetifyJS Data Table</a> and I need to move the entries of each header cell as close as possible to each other.
  I tried to add a <em>width</em> to each header but that didn't work - it seems there is a predefined width one can't go below.</p>
  <p>Update: This is how it should look like - the margin between each row should be fixed at 10px:
  <a href="https://i.stack.imgur.com/tLGSV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tLGSV.png" alt="enter image description here" /></a></p>
  <p>Here is a CodePen <a href="https://%20https://codepen.io/anon/pen/ejEpKZ?&amp;editors=101" rel="nofollow noreferrer">example</a>.</p>
  <pre><code> &lt;div id=&quot;app&quot;&gt;
    &lt;v-app id=&quot;inspire&quot;&gt;
      &lt;v-data-table
        :headers=&quot;headers&quot;
        :items=&quot;desserts&quot;
        class=&quot;elevation-1&quot;
      &gt;
        &lt;template slot=&quot;headerCell&quot; slot-scope=&quot;props&quot;&gt;
          &lt;v-tooltip bottom&gt;
            &lt;span slot=&quot;activator&quot;&gt;
              {{ props.header.text }}
            &lt;/span&gt;
            &lt;span&gt;
              {{ props.header.text }}
            &lt;/span&gt;
          &lt;/v-tooltip&gt;
        &lt;/template&gt;
        &lt;template slot=&quot;items&quot; slot-scope=&quot;props&quot;&gt;
          &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
          &lt;td class=&quot;text-xs-right&quot;&gt;{{ props.item.calories }}&lt;/td&gt;
          &lt;td class=&quot;text-xs-right&quot;&gt;{{ props.item.fat }}&lt;/td&gt;
          &lt;td class=&quot;text-xs-right&quot;&gt;{{ props.item.carbs }}&lt;/td&gt;
          &lt;td class=&quot;text-xs-right&quot;&gt;{{ props.item.protein }}&lt;/td&gt;
          &lt;td class=&quot;text-xs-right&quot;&gt;{{ props.item.iron }}&lt;/td&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  <p>How to get them close together?</p>