<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>
In the code snippet above, I've attempted to apply CSS specifically to the title field within the b-table using tbClass. However, the styling does not seem to take effect as desired. (This issue was inspired by a post on Stack Overflow regarding Bootstrap-Vue table td element styling)
Unfortunately, my attempt did not achieve the intended result.
The main objective is to customize the appearance of only one field within the fields section.