将表格单元内的按钮移动到中心

Question

I have a button inside a table-cell. Table is something like this:

      <b-table
        v-if="rows.length"
        :thead-tr-class="'bug-report-thead'"
        :tbody-tr-class="'bug-report-tbody'"
        :items="rows"
        :fields="columnsToDisplay"
        :sort-compare="sortTableByKey"
        :striped="true"
        :bordered="true"
        :outlined="true"
        :hover="true"
        :no-sort-reset="true"
        :show-empty="true"
        :filter="filter"
        @filtered="onFiltered"
        :empty-text="emptyText"
        :sort-desc="true"
        :caption-top="true"
        responsive>
/b-table>

And button is something like this,

<template slot="iinstances" slot-scope="row">
  <div v-if=" total_rows>0 && row.item.imProdInstDet!=''">  
    <b-button style="text-align: center" :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1"> 
      More Details
    </b-button>
  </div>
</template>

How can I move the above button to centre of the cell? I have tried, margin:auto; display:block; margin:auto; display:block; as listed here: how to center the button inside a table cell but this doesn't seem to work.

Answer 1

There is a property in field object for custom style and classes by each column.

Try something like that:

<template>
  <div id="app">
    <b-table striped hover :items="items" :fields="fields">
      <template v-slot:cell(button)="data">
        <b-button>test</b-button>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    fields: ['id', 'name', { key: 'button', class: 'text-center' }],
    items: [
      { id: 1, name: 'Row 1' },
      { id: 2, name: 'Row 2' },
      { id: 3, name: 'Row 3' },
      { id: 4, name: 'Row 4' },
      { id: 5, name: 'Row 5' },
    ],
  }),
};
</script>