Bootstrap 3. Why is the table not being edited?

Question

css

When making a website, the customer asked to implement tables with a specific design (compact and color). I wrote the table itself, since it was Bootstrap that added the class = "table" class to the table and it became readable, but when adding css properties, nothing changes at all, I tried !important and much more, but all to no avail. Help. Thanks in advance.

<table id="myft-standart" class="table">
  <caption><h2>СТАНДАРТНЫЕ</h2></caption>
   <thead>
     <tr>
     <th><p>Модель стыкуемой арматуры</p></th>
     <th><p>Диаметр (мм)</p></th>
     <th><p>Длина (мм)</p></th>
     <th><p>Масса (кг)</p></th>
    </tr>
  </thead>
  <tbody>
    <tr>
     <td>D16</td>
     <td>24</td>
     <td>43</td>
     <td>0,09</td>
    </tr>
  </tbody>
</table>

#myft-standart {
    font-size: 0.8vw;
    border: 1px solid grey;
}

#myft-standart thead {
    text-align: center;
    border-bottom: 2px solid red !important;
}

 #myft-standart caption {
    text-align: center;
    color: #000;
    text-shadow: 0 0 1px grey;
}

#myft-standart th {
    text-align: center;
    padding: 0.5vw;
    padding-bottom: 0px;
    border: 1px solid grey;
}

#myft-standart td {
    text-align: center;
    padding: 0.5vw;
    border: 1px solid grey;
}

Answer 1

What's the problem? https://jsfiddle.net/odowbj3y/
all styles that you set are present