I have an issue by giving styles to the <td>
tag of b-table element.
This is the template:
<b-table
:fields="fields"
:items="items"
class="mx-1 mt-2"
v-if="items && items.length > 0"
>
<template
slot="email"
slot-scope="row"
>
<div :title="row.item.email">
<p class="user-email">{{row.item.email}}</p>
</div>
</template>
</b-table>
And this is the fields:
fields: [
{ key: "email", label: "Email"},
{ key: "user", label: "Name" },
{ key: "role", label: "Role" }
],
I want to give max-width of 300px to the <td>
of this table.
Please help!
You can set the tdClass
property inside of your field object.
But tdClass
just accepts a string or an array, not an object. So you can only reference to a css class.
fields: [
{ key: "email", label: "Email", tdClass: 'nameOfTheClass'},
{ key: "user", label: "Name" , tdClass: 'nameOfTheClass'},
{ key: "role", label: "Role" , tdClass: 'nameOfTheClass'}
]
and in your CSS:
.nameOfTheClass {
max-width: 300px;
}