时间戳

首页 > 解决方案 > 1px 边框问题不显示

html - 1px 边框问题不显示

问题描述

我试图在比较表上突出显示特定产品。突出显示颜色是红色，但我在使用 1px 时遇到问题，但是当我使用 2px 时效果很好，但 2px 太大了。

在此代码片段上还注意到它在我添加引导程序后不显示红色边框，因此附上屏幕截图。 在此处输入图像描述

我的目标是必须Selected Product被 RED 1px 边框包围。我也不介意显示这些类型的表格的任何其他提示。

我也试过这个但没有奏效：https ://muffinman.io/fix-for-chrome-not-rendering-borders/

border-collapse: collapse;如果我删除 BS 并使用相同的问题，看起来这也不是 Bootstrap问题

.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，还是我遗漏了什么？在此处输入图像描述

标签： htmlcss

解决方案

这是所需的输出吗？

更新

<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>

推荐阅读