How to prevent bootstrap from affecting a particular element and it's child element?

user_6265426 0
Viewed 35

The below is a working react code which just renders a small table.

App.js

import React from 'react';
import './style.css';
// import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <div>
      <table>
        <tr>
          <td>00</td>
          <td>01</td>
        </tr>
        <tr>
          <td>10</td>
          <td>11</td>
        </tr>
        <tr>
          <td>20</td>
          <td>21</td>
        </tr>
      </table>
    </div>
  );
}

styles.css:

table {
  /* border: 1px solid black; */
  border-collapse: separate;
}

td {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

You can see the third line importing bootstrap being commented out in the App.js file. When it is commented out, the table is rendered with borders for each cell and with a space between each cell due to the border-collapse: separate; in the css file which is how I want.

When I uncomment it, it imports bootstrap and the borders of the table cells are gone. In the table tag, I haven't added any bootstrap classes.

Is there any way to prevent this and get my borders back?

Please view my code and execution here : https://stackblitz.com/edit/react-ix81bu?file=src%2FApp.js.

bootstrap-4 reactjs css
1 Answers

Option 1: Uncomment the import bootstrap line to get its styles. Then try border-collapse: revert; instead of border-collapse: separate; This should undo effect of bootstrap's effect on border-collapse.

Option 2: Uncomment the import bootstrap line to get its styles. Change border-collapse: separate; to border-collapse: separate !important; so that it will not be overridden. Refer Introducing the CSS Cascade for in-depth concepts.

user_195306500
Related