Когда я использую таблицу из тега "response- bootstrap" внутри тега <div>с классом flex-container, таблица не выравнивается внутри контейнера - PullRequest
Новая
       16

Когда я использую таблицу из тега "response- bootstrap" внутри тега <div>с классом flex-container, таблица не выравнивается внутри контейнера

0 голосов
/ 07 марта 2020

Я импортировал импорт "bootstrap / dist / css / bootstrap .min. css" в индексе. js

Это мои CSS классы. Обратите внимание, что я дал ширину: 50%. 

.flex-container {
  display: flex;
  flex-direction: row;
  background-color: rgb(234, 239, 243);
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 50%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

Ниже приведен минимальный пример того, что я пытаюсь сделать в своем коде компонента, 

import { Table } from "react-bootstrap";

<div className="flex-container">
      <div>
        <h1> Some heading </h1> <! ––this element gets aligned in the left side of container as expected -->
        <Table> <! ––this does not get aligned in the left side of the container which I expected as both element are inside same div tag-->         
          <thead>
            <tr>
              <th>heading 1</th>
              <th>headin 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>some data</td>
              <td>some other data </td>
            </tr>
          </tbody>
        </Table>
      </div>
      <div>
        <!--Some other render elements which get aligned to the right side as expected-->
      </div>
 </div>

Когда я использую basi c HTML стол, отлично работает, 

import { Table } from "react-bootstrap";

<div className="flex-container">
      <div>
        <h1> Some heading </h1> <! ––this element gets aligned in the left side of container as expected -->

        <table> <! ––this gets aligned in the left side of the container -->  
          <tr>
            <td> value 1</td>
            <td> value 2</td>
          </tr>
          <tr>
            <td> value 3</td>
            <td> value 4</td>
          </tr>
        </table>
      </div>
      <div>
        <!--Some other render elements which get aligned to the right side as expected-->
      </div>
   </div>

Пожалуйста, помогите.

...