Блог

Главная - Вопросы по программированию - Ширина на столе

Ширина на столе

#html #css

Вопрос:

Моя линия бирюзового цвета должна быть шириной 5%, и я вижу, что она намного больше? Почему у меня эта проблема? Почему не соблюдается ширина каждого цвета?

введите описание изображения здесь

 <!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/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>

Ответ №1:

Если вы хотите иметь различную ширину ячеек таблицы, вам нужно иметь несколько таблиц. Убедитесь, что ширина всех ячеек составляет 100%. Поэтому, если вы хотите получить строку таблицы с ячейкой 5% и другую ячейку шириной 25%, вам нужна третья пустая ячейка с 70%. В этом случае я добавил оранжевый цвет фона для третьей ячейки только для видимости, но вы можете удалить его.

 <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>
Метки: