web-dev-qa-db-fra.com

Changer la largeur par défaut d'une cellule VuetifyJS DataTable

J'utilise la table de données VuetifyJS et j'ai besoin de déplacer les entrées de chaque cellule d'en-tête le plus près possible les unes des autres. J'ai essayé d'ajouter width à chaque en-tête mais cela n'a pas fonctionné - il semble qu'il existe une largeur prédéfinie que l'on ne peut pas descendre en dessous. 

Mise à jour: voici à quoi cela devrait ressembler - la marge entre chaque ligne doit être fixée à 10 pixels:  enter image description here

Voici un exemple 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>

Comment les rapprocher?

javascriptvue.jsdatatablevuetify.js
7
Tom

Vous pouvez ajouter un autre en-tête vide et définir width de chaque colonne sur la valeur minimale (1%), à l'exception de la valeur vide pour qu'elle remplisse tout l'espace disponible. Vous devez également ajouter une variable td vide au modèle de corps de tableau pour rendre les séparateurs de lignes grises visibles.

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

7
Max Sinev

Vous pouvez jouer avec CSS, remplacer leurs classes. Essayez de modifier td 's width

Ici vous avez un stylo de code: https://codepen.io/anon/pen/gjxPMJ

J'ai également aligné le texte à gauche pour td: <td class="text-xs-left">

Il suffit de jouer avec la valeur de largeur pour obtenir ce que vous voulez, vous pouvez également utiliser des pourcentages.

0
V. Sambor