Блог

Я использовал stacked b-table в bootstrap-vue.

    <b-modal :id="infoModal.id" :title="infoModal.title" hide-footer @hide="resetInfoModal;">
        <pre>
            <b-table stacked sticky-header head-variant="light" :items="infoModal.content" :fields="reviewFields"></b-table>
        </pre>
        <template>
            <div class="overflow-auto">
                <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
            </div>
        </template>
    </b-modal>
  

это результат:

Во-первых, я хочу переместить отмеченную базовую линию влево.

Во-вторых, содержимое таблицы превышает контур (красную линию) таблицы. Я хочу, чтобы содержимое можно было прокручивать в пределах фиксированного столбца таблицы.

Как я могу получить эти эффекты?

Вы могли бы установить стиль для каждого столбца

 reviewFields: [
  { key: 'key0', label: 'label0', class: 'css-class' },
  { key: 'key1', label: 'label1', class: 'css-class' },
  { key: 'key2', label: 'label2', class: 'css-class' },
  { key: 'key3', label: 'label3', class: 'css-class' },
  { key: 'key4', label: 'label4', class: 'css-class' },
]