I have the following table in which I can't align some items such as the checkbox and the actions:

This is the table:
<v-data-table
:headers="headers"
:items="users"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.email }}</td>
<td class="text-xs-left">{{ props.item.empresa.descripcion}}</td>
<v-checkbox disabled v-model="props.item.isAdmin"></v-checkbox>
<td class="text-xs-left">{{ props.item.createdAt }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
Editar
</v-icon>
<v-icon
small
left
class="mr-2"
@click="deleteItem(props.item)"
>
Eliminar
</v-icon>
</td>
</template>
</v-data-table>
I need to align the v-checkbox and the v-icon.
There is no css in the <style> section.
Give it a try wrapping the <v-layout justify-center></v-layout> with <td></td> like the Ohgodwhy comment.
It would be like:
<v-data-table
:headers="headers"
:items="users"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>
<v-layout justify-center>
{{ props.item.email }}
</v-layout>
</td>
<td>
<v-layout justify-center>
{{ props.item.empresa.descripcion}}
</v-layout>
</td>
<td>
<v-layout justify-center>
<v-checkbox disabled v-model="props.item.isAdmin"></v-checkbox>
</v-layout>
</td>
<td>
<v-layout justify-center>
{{ props.item.createdAt }}
</v-layout>
</td>
<td>
<v-layout justify-center>
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
Editar
</v-icon>
<v-icon
small
left
class="mr-2"
@click="deleteItem(props.item)"
>
Eliminar
</v-icon>
</v-layout>
</td>
</template>
</v-data-table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With