1px 边框问题不显示

Question

I'm trying to highlight a specific product on the comparison table. The highlight color is Red but i'm having issues when using 1px, but when i use 2px it works fine but 2px is to big.

Also noticed on this code snippet it does not display RED borders after i have added bootstrap, so attaching a screenshot.

My goal is to have Selected Product to be surrounded by RED 1px border. Also i would not mind any other tips of displaying these types of table.

I have also tried this but did not work: https://muffinman.io/fix-for-chrome-not-rendering-borders/

Also looks like this is not Bootstrap issue, if i remove the BS and use border-collapse: collapse; same problem

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

Also double checked my BS is running first then my CSS or i'm missing something?

Answer 1

Is this the desired ouput?

UPDATED

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

Answer 2

您可以为您的规则添加td ，例如td.border-top然后它使它比 BS 规则更具体并覆盖它