Width on a table-CodePudding

My line in turquoise color must be 5% width and I see it's a lot more? Why do I have this problem please? Why the widths of each color are not respected?

enter image description here

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
   </head>
   <body>
      <br><br>
      <div class="table-responsive" *ngIf="strikes.length > 0">
         <table class="table table-striped">
            <thead>
               <tr>
                  <th scope="col" style="width: 44%; text-align: center;">CALL</th>
                  <th class="exoPrice" scope="col" style="width: 12%;background-color: #dee2e657;">
                  </th>
                  <th scope="col" style="width: 44%; text-align: center">PUT</th>
               </tr>
               <tr>
                  <th scope="col" style="width: 3%; background-color: aqua;"></th>
                  <th scope="col" style="width: 25%; background-color: green;">Quantity</th>
               </tr>
            </thead>
         </table>
      </div>
   </body>
</html>

CodePudding user response：

If you want to have various width for the table cells, you need to have multiple tables. Make sure that the width of all cells add up to 100%. So if you want to achieve a table row with a cell of 5% and another cell with 25% width, you need to have a third empty cell with 70%. I have added background-color orange for the third cell in this case just for the visibility, but you can remove that.

<div class="table-responsive">
  <table class="table table-striped" style="width:100%">
    <tr>
      <td scope="col" style="width: 44%; text-align: center;">CALL</td>
      <td class="exoPrice" scope="col" style="width: 12%; background-color: #dee2e657;"></td>
      <td scope="col" style="width: 44%; text-align: center">PUT</td>
    </tr>
  </table>
  <table style="width:100%">
    <tr>
      <td scope="col" style="width: 5%; background-color: aqua;"></td>
      <td scope="col" style="width: 25%; background-color: green;">Quantity</td>
      <td scope="col" style="width: 70%; background-color: orange;"></td>
    </tr>
  </table>
</div>