Ändern Sie die Standard-Breite eines VuetifyJS DataTable-Zelle

Ich bin mit dem VuetifyJS Daten Tabelle und ich brauche zu bewegen, die Einträge der einzelnen header-Zelle so nah wie möglich an einander.
Ich versucht, um einen Breite zu jeder header, aber das hat nicht funktioniert - es scheint, gibt es eine vordefinierte Breite kann man nicht unter zu gehen.

Update: Das ist, wie es Aussehen sollte - die Marge zwischen jeder Zeile fixiert werden soll, an 10px:
Ändern Sie die Standard-Breite eines VuetifyJS DataTable-Zelle

Hier ist ein CodePen-Beispiel:

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>

Wie man Sie eng zusammen?

  • Was meinst du width funktioniert nicht? Es sollte string z.B. width:"10%" oder width:"10".
InformationsquelleAutor Tom | 2018-07-25
Schreibe einen Kommentar