Как сделать так, чтобы заголовок Reaction-bootstrap-table2 был над таблицей, а не под ней?

Question

Я пытался использовать код в реагирующей-начальной загрузке-таблице2 Пример "Таблица с заголовком" , но мой заголовок находится ниже таблицы.Я нашел этот ответ: "Это потому, что у bootstrap 4 есть стиль заголовка css по умолчанию - caption-side: bottom" , но речь идет не о response-bootstrap-table2, и он не дает пример.Затем я нашел эту страницу: заголовок .

Итак, я создал tables.css:

.top caption {
  caption-side: top;
}

Я импортировал его, используя import './tables.css';.И я добавил имя класса в свою таблицу:

    <BootstrapTable
      className="top"
      bootstrap4={ true }
      caption={ <CaptionElement /> }
      keyField='id'
      data={ data.team.bids }
      columns={ columns }
      striped
      hover />

Но заголовок все еще находится под таблицей.

Как мне получить заголовок, чтобы быть над таблицей?

Answer 1

Значение caption для bootstrap-table-next работает как обычный тег заголовка HTML.Я создал образец песочницы для игры с размещением caption для стола.

Наблюдения :

1. Используя тот же элемент заголовка демонстрации изВ сборнике рассказов мне удалось изменить расположение надписи сверху или снизу.
2. Обратите внимание, что тег caption отображается внутри элемента div с классом 'table', а НЕ top.Чтобы добиться этого, добавление нижнего стиля (с сохранением того же JS) поместит заголовок над / под таблицей -

table caption {
  caption-side: top;
}

Ссылка в песочнице - https://codesandbox.io/embed/react-boot-table-caption-placement-1mvql