Как остановить реакцию таблицы Strap динамически распределять ширину столбца в зависимости от отображаемых данных

Question

Я реализовал реактивную ленту, таблицу с разбиением на страницы, которая отображает информацию о пользователях на разных страницах в зависимости от выбранной страницы.

  <Row>
          <Card >
            <CardHeader>
              <i className="fa fa-align-justify"></i> Admins{" "}
              <small className="text-muted">
                La liste complète des admins{" "}
              </small>
            </CardHeader>
            <CardBody>
              <Table responsive hover >
                <thead>
                  <tr>
                    <th scope="col">id</th>
                    <th scope="col">Nom</th>
                    <th scope="col">Email</th>
                    <th scope="col">Role</th>
                    {/* TODO: Derniere == Dernière problem with UTF */}
                    <th scope="col">Derniere connexion</th>
                  </tr>
                </thead>

                <tbody>
                  {this.props.usersInformation
                    .slice(
                      this.state.currentPage * 5,
                      (this.state.currentPage + 1) * 5
                    )
                    .map(userInformation => {
                      const userLink = `/home/users/${userInformation.id}`;
                      return (
                        <tr key={userInformation.id.toString()}>
                          <th scope="row">
                            <Link to={userLink}>{userInformation.id}</Link>
                          </th>
                          <td>
                            <Link to={userLink}>{userInformation.nom}</Link>
                          </td>
                          <td>{userInformation.email}</td>
                          <td>{userInformation.role}</td>
                          <td>{userInformation.derniereCnx}</td>
                        </tr>
                      );
                    })}
                </tbody>
              </Table>
            </CardBody>
            <TablePagination
              pagesCount={this.props.pagesCount}
              currentPage={this.state.currentPage}
              handlePageClick={this.handlePageClick}
              handlePreviousClick={this.handlePreviousClick}
              handleNextClick={this.handleNextClick}
            />
          </Card>
        </Row> 

Проблема состоит в том, что, поскольку информация о пользователях различна, таблица изменяет распределение размера столбца таблицы в зависимости от длины данных пользователей. Другими словами, когда я перехожу с одной страницы на другую, таблица изменяет размеры столбцов, что раздражает и не удобно для пользователя.
В этом примере у меня есть четыре страницы:
Страница 1:

Страница 2:

Страница 3:

Страница 4:

Я не знаю, ясно ли это или не. Но размер столбцов меняется от одного изображения к другому.
Я полагаю, это как-то связано с отзывчивостью Bootstrap, так как response-strap основан на Bootstrap.
Я пытался это исправить создав пользовательский класс CSS для фиксирования высоты и ширины таблицы, но это не исправило фактический размер столбцов.
Есть идеи, как решить эту проблему?