title: Using CSS to style data table to remove borders and change data cell height?
body: <p>I have a vuetify data table that i am trying to custom style to remove borders and change the height of the  to 40 px but it doesn't seem to be working. Here is a sample <a href="https://codepen.io/treehuggerrick/pen/KKKRLMg" rel="nofollow noreferrer">codepen</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data() {
      return {
        headers: [{
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          {
            text: 'Calories',
            value: 'calories'
          },
          {
            text: 'Fat (g)',
            value: 'fat'
          },
          {
            text: 'Carbs (g)',
            value: 'carbs'
          },
          {
            text: 'Protein (g)',
            value: 'protein'
          },
          {
            text: 'Iron (%)',
            value: 'iron'
          }
        ],
        desserts: [{
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
        ]
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table.v-table.tbody.td,
  table.v-table.tbody.th {
    height: 40px !important;
    border: hidden !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.20/dist/vuetify.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.20/dist/vuetify.min.css" rel="stylesheet" /&gt;
  &lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-data-table id="customStyleTable" :headers="headers" :items="desserts" class="elevation-1"&gt;
        &lt;template v-slot:items="props"&gt;
          &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
          &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
          &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
          &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
          &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
          &lt;td class="text-xs-right"&gt;{{ props.item.iron }}&lt;/td&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The CSS that i am using to target the cells doesn't seem to change the height or border but the inspector shows those specified classes. Any help will be appreciated. Thank you.</p>