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!

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

Solution 2

Here: https://bootstrap-vue.js.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.

Solution 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.!! 😃

Comments

[Jns]

Okay, I've tried it here again, just to be sure and it works: jsfiddle.net/yzjudf6b/1 By using the inspector you can see that both style attributes are assigned to the td element

[Jns]

If it doesn't work for you, maybe you could create a small snippet?

[Arevshatyan Gegham]

I see it works on JSFiddle. But it don't work on my machine, sorry :/

[Jns]

Are you using the latest version of bootstrap-vue?

[Yom T.]

@ArevshatyanGegham Please inspect the affected elements and make sure the styling isn't being overridden by something else.

[Arevshatyan Gegham]

Styling isn't being overridden. When I inspect the element I see the class that I gave to it, but there's no styling shown in the CSS. When I add the style in the inspector it works properly!

[Jns]

Does your <style> tag has the scoped attribute?

[ChrisE]

Thanks Jns, that solved it for me. I was using <style scoped>.myclass{}</style>. Removing the scoped worked. I also needed !important.