Ä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:
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%"
oderwidth:"10"
.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie fügen Sie eine weitere leere Kopfzeile und setzen Sie
width
jeder Spalte " min " - Wert(1%), außer leer zu machen, füllen Sie alle freien Platz. Auch Sie müssen zum hinzufügen von leerentd
Tabelle body template zu machen graue Zeile Trennwänden sichtbar.Sehen codepen: https://codepen.io/anon/pen/WKXwOR
th
undtd
Elemente (table.v-table tbody td
undtable.v-table thead th
Selektoren). Ich aktualisierte Antwort codepenSpielen kann man mit CSS, überschreiben Ihren Klassen. Versuchen Sie, ändern
td
'swidth
Hier aus haben Sie einen code-Stift: https://codepen.io/anon/pen/gjxPMJ
Habe ich auch ausgerichtet text auf der linken Seite für td :
<td class="text-xs-left">
Spielen Sie einfach mit der Wert für die Breite zu bekommen, was Sie wollen, können Sie Prozentsätze als gut.