table responsive not work

In my table ,responsive not work

    <b-table
      fixed
      ref="selectableTable"
      selectable
      select-mode="multi"
      :items="items"
      :fields="fields"
      @row-selected="onRowSelected"
      responsive
      outlined
      :busy="isBusy"
      striped
      bordered
      hover
      small
      show-empty
      empty-text="空空如也"
      stacked="md"
    >
      <!-- Example scoped slot for select state illustrative purposes -->
      <template v-slot:table-busy>
        <div class="text-center text-danger my-2">
          <b-spinner class="align-middle"></b-spinner>
          <strong> 正在努力加载数据</strong>
        </div>
      </template>
      <template v-slot:cell(IsSelected)="{ rowSelected }">
        <template v-if="rowSelected">
          <b-icon icon="lock"></b-icon>
          <span class="sr-only">Selected</span>
        </template>
        <template v-else>
          <b-icon icon="unlock"></b-icon>
          <span class="sr-only">Not selected</span>
        </template>
      </template>
      <template v-slot:cell(index)="data">
        {{ data.index + 1 }}
      </template>
      <template v-slot:cell(is_survey)="data">
        <a :class="data.item.is_survey ? 'text-success' : 'text-danger'">{{
          data.item.is_survey ? "是" : "否"
        }}</a>
      </template>
      <template v-slot:cell(progress)="data">
        <a
          :class="
            parseInt(data.item.progress) == 100
              ? 'text-success'
              : parseInt(data.item.progress) < 100 &&
                parseInt(data.item.progress) > 90
              ? 'text-info'
              : parseInt(data.item.progress) < 90 &&
                parseInt(data.item.progress) > 80
              ? 'text-warning'
              : parseInt(data.item.progress) < 80 &&
                parseInt(data.item.progress) > 60
              ? 'text-primary'
              : parseInt(data.item.progress) == 0
              ? 'text-danger'
              : 'text-dark'
          "
          >{{ data.item.progress }}</a
        >
      </template>
    </b-table>

[nejinn]

I am sorry！In my project, this work perfect!

  <div class="table-responsive">
    <b-table table-class="text-nowrap" responsive>
    </b-table>
  </div>

[nejinn]

e-layout: fixed sty

fixed and responsive modes do not always play well together.

fixed layout, where every column is made equal widths (unless a width is provided via style/css per column) uses table-layout: fixed style, which looks at the first row to determine the width the table needs to fit in the current container’s max width.

Either remove the fixed prop, or control the widths of the column headers:

<b-table fixed responsive ...>
  <!-- this applied to all header cells that do not have an explicit slot provided -->
  <template v-slot:head()="scope">
    <div style="width:20rem">{{ scope.label }}</div>
  </template>
</b-table>

Or use the table-colgroup slot to set widths for the column(s):

<b-table fixed responsive ...>
  <template v-slot:table-colgroup>
    <col style="width: 10rem">
    <col style="width: 20rem">
    <col>
    <col style="width: 30rem">
    <!-- add as many <col> elements as needed -->
  </template>
</b-table>

<col> entries without a width set will all be set to equal widths to take up the remaining available space. So it is usually a good idea to set a width for each column (specifically when using fixed layout mixed with responsive)

We can dosomething: add

< div class="table-responsive" > < b-table ></b-table></div>

add table-class=“text-nowrap” in < b-table >。horizontal scrollbar works！

  <div class="table-responsive">
    <b-table
      ref="selectableTable"
      selectable
      select-mode="multi"
      :items="items"
      :fields="fields"
      @row-selected="onRowSelected"
      outlined
      :busy="isBusy"
      striped
      bordered
      hover
      small
      show-empty
      empty-text="空空如也"
      stacked="md"
      :sticky-header="true"
      table-class="table-responsive text-nowrap"
    ></b-table>
  </div>