bootstrap-vue table td element styling

问题

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!

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

回答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.

来源：https://stackoverflow.com/questions/53744011/bootstrap-vue-table-td-element-styling