bootstrap 5.1.3 and custom CSS borders-CodePudding

I can't see the table's borders, but when I remove the bootstrap link

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

it works fine. Now what is going on? I don't understand why can't I use custom borders and bootstrap at same time, it used to be possible in older versions, and I need the new version for some features.

td {
  height: 150px;
  width: 150px;
  text-align: center;
  border: 5px solid black;
  font-size: 100px;
  border-style: solid;
}

<table align="center">
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
  <tr>
    <td>X</td>
    <td>X</td>
    <td>X</td>
  </tr>
</table>

CodePudding user response：

Change the css to from td {} to table td{} . Its not a good practice to use !important

    table td {
  height:150px;
  width:150px;
  text-align: center;
  border: 5px solid black;
  font-size: 100px;
  border-style: solid;
}

CodePudding user response：

just add an !important at the end of the attribute you try to change. It solves the Problem but its not the best Practice to use... But in cases like overwriting CSS from Bootstrap etc. its an easy way to overwrite any other CSS, no matter where it was declared.

td{
  height:150px;
  width:150px;
  text-align: center;
  border: 5px solid black !important;
  font-size: 100px;
  border-style: solid;
}

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
     <table align="center">
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
    <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
    </tr>
  </table>