bootstrap-vue table td element styling

Question

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!

Answer 1

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;
}

Answer 2

Here: https://bootstrap-vue.org/docs/components/table you can read: "class, thClass, tdClass etc. will not work with classes that are defined in scoped CSS". So this may be the case it was not working for you. If you want to style your thead, you can use thStyle property in your field object i.e:

{
   key: 'test', label: 'Test', thStyle: { backgroundColor: '#3eef33'}
}

Hope this will help.

Answer 3

The only way i managed to get it to work for me is by using Vue's Deep Selector on the table and targeting td tag.

<style lang="css" scoped>
/* ::v-deep/ .table > tbody > tr > td { */
/deep/ .table > tbody > tr > td {
max-width: 300px;
}
</style>

I hope this helps someone out there.!! 😃