CODEWITHSUNDEEP
javascriptcssnode.jsvue.jsbootstrap-vue
RaGyun
RaGyun

Reputation: 63

How to apply b-table fields thClass or tdClass or class

<template>
 <b-table
   striped hover
   :fields="fields"
   :items="list"
   class="table"
 >
</template>
<style lang="scss" scoped>
  .table >>> .bTableThStyle {
    max-width: 12rem;
    text-overflow: ellipsis;
  }
</style>
<script lang="ts">
 import { Component, Vue, Watch } from "nuxt-property-decorator";
 @Component(...)
 export default class className extends Vue {
  fields = [
   {label: 'index', key: 'index', sortable: true, filter: true, editable: true},
   {label: 'title', key: 'title', sortable: true, filter: true, editable: true, tbClass: 'bTableThStyle'},
  ];
 }
</script>

At the code snippet above, I tried to apply CSS only to the event name in the fields of the b-table using tbClass. (Reference URL: bootstrap-vue table td element styling)

I't does not work.

The goal is to style just one field for fields

Upvotes: 3

Views: 4253

Answers (1)

Titus Sutio Fanpula
Titus Sutio Fanpula

Reputation: 3613

For your style, you can try with this code below:

<style lang="scss" scoped>
  /** or use this class: table thead th.bTableThStyle { ... } */
  .table .bTableThStyle {
    max-width: 12rem !important;
    text-overflow: ellipsis !important;
  }
</style>

Make sure, your .bTableThStyle has been added to your html when you inspect your element.

Upvotes: 1

Related Questions