Изменение ширины ячейки Vuetifyjs DataTable по умолчанию

Я использую Таблица Данных VuetifyJS и мне нужно переместить записи каждой ячейки заголовка как можно ближе друг к другу. Я попытался добавить ширина для каждого заголовка, но это не сработало-кажется, есть предопределенная ширина, которую нельзя пройти ниже.

Update: вот как это должно выглядеть - поле между каждой строкой должно быть зафиксировано в 10px: enter image description here

вот CodePen пример:

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>

Как получить их близко друг к другу?

6
datatable javascript vue.js vuetify.js

2 ответов

можно добавить еще один пустой заголовок и set width каждого столбца до минимального значения (1%), за исключением пустого, чтобы заполнить все свободное пространство. Также вам нужно добавить empty td к шаблону тела таблицы для того чтобы сделать серые рассекатели строки видимым.

см. codepen:https://codepen.io/anon/pen/WKXwOR

3

вы можете играть с CSS, переопределять свои классы. Попробуйте изменить td ' s width

здесь у вас есть кодовое перо:https://codepen.io/anon/pen/gjxPMJ

Я также выровнял текст слева для td:<td class="text-xs-left">

просто играть со значением ширины, чтобы получить то, что вы хотите, вы можете использовать также проценты.

0