0

I have imported import "bootstrap/dist/css/bootstrap.min.css" in index.js

These are my CSS classes. Note that I have given width: 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;
}

The following is a minimal example of what I am trying to do in my Component code,

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>

When I use a basic HTML table, it works fine,

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>

Please help.

3
  • 1
    You are missing table tag close </Table> Mar 7, 2020 at 13:45
  • 1
    It was a typing mistake. I edited the question Mar 7, 2020 at 15:07
  • Do you have another style in your code, I reproduced and it works fine Mar 7, 2020 at 15:26

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.