проблема с границей размером 1 пиксель не отображается

ProgramBox

проблема с границей размером 1 пиксель не отображается

Post author:admin
Запись опубликована:12 марта, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я пытаюсь выделить конкретный продукт в таблице сравнения. Цвет выделения красный, но у меня возникают проблемы при использовании 1px, но когда я использую 2px, он работает нормально, но 2px слишком большой.

Также заметил, что в этом фрагменте кода не отображаются КРАСНЫЕ границы после того, как я добавил bootstrap, поэтому прикрепляю скриншот.

Моя цель — Selected Product быть окруженным КРАСНОЙ границей размером 1 пиксель. Также я не возражал бы против любых других советов по отображению этих типов таблиц.

Я также пробовал это, но не сработало: https://muffinman.io/fix-for-chrome-not-rendering-borders /

Также похоже, что это не проблема начальной загрузки, если я удалю BS и использую border-collapse: collapse; ту же проблему

 .table {
  margin: 20px;
  display: inline-block;
  text-align: center;
}

table,
th,
td {
  border: 1px solid #ddd;
  padding: 10px;
}

th:not(:first-child) {
  width: 200px;
}

table,
th {
  font-weight: normal;
}

.border-sides {
  border-right: 1px solid red !important;
  border-left: 1px solid red !important;
}

.border-top {
  border-top: 1px solid red !important;
}

.border-bottom {  
  border-bottom: 1px solid red !important;
}

.bg-selected {
  background-color: #b3c2ff;
}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="table">
      <table>
        <thead>
          <tr>
            <th></th>

            <th>
              <div class="text-left">
                <span>Title - Product 1 Test</span>
              </div>
            </th>

            <th class="border border-top">
              <div class="text-left">
                <span class="font-weight-bold">Selected Product:</span>
                <span>Title - Product 2</span>
              </div>
            </th>

            <th>
              <div class="text-left">
                <span>Title - Product 2</span>
              </div>
            </th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td></td>

            <td>
              <button class="btn btn-primary">View</button>
            </td>

            <td class="border border-sides">
              <button class="btn btn-primary">Buy now</button>
            </td>

            <td>
              <button class="btn btn-primary">View</button>
            </td>
          </tr>

          <tr class="text-left">
            <td>Description 1</td>
            <td>Y</td>
            <td class="border bg-selected">N</td>
            <td>N</td>
          </tr>

          <tr class="text-left">
            <td class="test">Description 2</td>
            <td>N</td>
            <td class="border bg-selected">N</td>
            <td>N</td>
          </tr>

          <tr>
            <td></td>

            <td>
              <button class="btn btn-primary">View</button>
            </td>

            <td class="border border-bottom">
              <button class="btn btn-primary">Buy now</button>
            </td>

            <td>
              <button class="btn btn-primary">View</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

Также дважды проверил, что сначала запускается моя BS, а затем мой CSS, или я что-то упускаю?

1. Он не применяет красную рамку после добавления bootstrap, потому _borders.scss что применяется border: 1px solid #dee2e6!important; через селектор .border классов, и, хотя ваше правило для .border-sides также используется !important , оно было встроено до стилей BS, поэтому последние выигрывают.

2. hm имеет смысл каким-либо образом переопределить BS?

3. Убедитесь, что ваша собственная таблица стилей встроена после стилей BS …

4. Для вашего случая w3schools.com/css/css_outline.asp , было бы намного лучше, я думаю.

5. похоже, что outline не будет вариантом, потому что я не могу выбрать его стороны, а элементы html отсутствуют в поле div

Ответ №1:

Является ли это желаемым выходом?

ОБНОВЛЕНО

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<style>
  .table {
    margin: 20px;
    display: inline-block;
    text-align: center;
  }
  
  table,
  .table thead th,
  .table td {
    border: 1px solid #ddd;
    border-collapse: separate;
    border-spacing: 0px;
    padding: 10px;
  }
  
  table {
    padding: 0;
    border-width: 0 2px 0 0.5px;
  }
  
  th:not(:first-child) {
    width: 200px;
  }
  
  table,
  th {
    font-weight: normal;
  }
  
  .table thead th{
    border-top-width: 1px;
  }
  
  .table tr:last-child td{
    border-bottom-width: 1px;
  }
  
  .table thead th, .table td{
    border-right: none;
  }
  
  .border-sides {
    border-right: 1px solid red !important;
    border-left: 1px solid red !important;
  }
  
  .border-sides   td, .table thead .border-sides   th{
    border-left: none;
  }
  
  .border-top {
    border-top: 1px solid red !important;
  }
  
  .border-bottom {
    border-bottom: 1px solid red !important;
  }
  
  .bg-selected {
    background-color: #b3c2ff;
  }
</style>

<div class="table">
  <table>
    <thead>
      <tr>
        <th></th>

        <th>
          <div class="text-left">
            <span>Title - Product 1 Test</span>
          </div>
        </th>

        <th class="border border-top border-sides">
          <div class="text-left">
            <span class="font-weight-bold">Selected Product:</span>
            <span>Title - Product 2</span>
          </div>
        </th>

        <th>
          <div class="text-left">
            <span>Title - Product 2</span>
          </div>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td></td>

        <td>
          <button class="btn btn-primary">View</button>
        </td>

        <td class="border border-sides">
          <button class="btn btn-primary">Buy now</button>
        </td>

        <td>
          <button class="btn btn-primary">View</button>
        </td>
      </tr>

      <tr class="text-left">
        <td>Description 1</td>
        <td>Y</td>
        <td class="border bg-selected border-sides">N</td>
        <td>N</td>
      </tr>

      <tr class="text-left">
        <td class="test">Description 2</td>
        <td>N</td>
        <td class="border border-sides bg-selected">N</td>
        <td>N</td>
      </tr>

      <tr>
        <td></td>

        <td>
          <button class="btn btn-primary">View</button>
        </td>

        <td class="border border-bottom border-sides">
          <button class="btn btn-primary">Buy now</button>
        </td>

        <td>
          <button class="btn btn-primary">View</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

1. да, похоже, это самое близкое, что я могу получить

2. Было бы проще, если бы не таблица. В случае возникновения каких-либо проблем, дайте мне знать и не забудьте отметить правильный ответ, когда закончите 🙂

3. хм, есть какие-нибудь мысли о том, как по-другому этого можно достичь? 🙂

4. @Marius не могли бы вы указать, какие именно изменения вы хотите?

5. просто для отображения содержимого как на снимке экрана, но также для получения этого красного поля размером 1 пиксель в выбранном столбце

Ответ №2:

Вы можете добавить td для своего правила, например td.border-top , тогда это делает его более конкретным, чем правило BS, и переопределяет его