Geek Answers Handbook

CSS border-right in Chrome

I have the following code and for some reason, in the latest version, the border-right chrome does not disappear only if you select the column on the right. just copy the code and you will see. thanks.

<DOCTYPE! html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Highlighting</title> <style type="text/css"> body { background-color: rgba(0,0,0,1); } #decor-table { font-family: Calibri, "Times New Roman", Arial; font-size: 13px; text-align: left; border-collapse: collapse; } #decor-table th { font-size: 14px; padding: 10px 10px; color: rgba(153,153,153,1); text-transform: uppercase; } #decor-table td { padding: 3px 10px; color: #369; vertical-align: middle; } #oce-first { font-weight: bold !important; background-color: rgba(204,204,204,0.2); border-bottom: 1px solid rgba(204,204,204,0.5); } .hover_class { color: rgba(225,225,225,1) !important; background: rgba(204,204,204,0.2); border-left: 1px solid rgba(204,204,204,0.5); border-right: 1px solid rgba(204,204,204,0.5); } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var cellClassName = false; $("td, th").hover ( function() { cellClassName = $(this).attr("class"); $("." + cellClassName).addClass("hover_class"); }, function() { $("." + cellClassName).removeClass("hover_class"); } ); }); </script> </head> <body> <table width="900px" id="decor-table"> <thead> <tr id="oce-first"> <th width="17%" class="col1">test</th> <th width="18%" class="col2">test</th> <th width="13%" class="col3">test</th> <th width="11%" class="col4">test</th> <th class="col5">test</th> <th width="16%" class="col6">test</th> </tr> </thead> <tbody> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3">test</td> <td class="col4">test</td> <td class="col5">test</td> <td class="col6">test</td> </tr> <tr> <td class="col1">test</td> <td class="col2">test</td> <td class="col3"></td> <td class="col4"></td> <td class="col5">test</td> <td class="col6"></td> </tr> <tr> <td class="col1">test</td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> <td class="col5">test</td> <td class="col6"></td> </tr> <tr> <td class="col1"></td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> <td class="col5">test</td> <td class="col6"></td> </tr> </tbody> </table> </body>
+4
source share
2 answers

Well known Chrome artifacts

Live demo

 .hover_class { color: rgba(225,225,225,1) !important; background-color: rgba(204,204,204,0.2); border-left: 1px solid rgba(204,204,204,0.5); border-right: 1px solid rgba(204,204,204,0.5); -webkit-transform: translate3d(0,0,0); /* THIS WILL FIX IT */ }

Using % (table cells are by default in % ). Chrome plays smarter and uses some kind of half-pixel-precision , which leads to the fact that the pixels move to the next, leaving traces known as “artifacts”, so you need some kind of hacker “repainting”.

If you use PX's rigorous mathematical positioning, you will also get rid of the “problem”,
In addition, you can use box-shadow to get rid of these unfriendly lines by 98%.

If I were you, I would use transparent borders in the initial state, so no jumps will be visible

+3
source

Updated DEMO

I think the problem is with your table width since you provided them with a px value and set the th value to%, so I completely changed to% as shown

 <tr id="oce-first"> <th width="20%" class="col1">test</th> <th width="20%" class="col2">test</th> <th width="20%" class="col3">test</th> <th width="14%" class="col4">test</th> <th width="16%" class="col5">test</th> <th width="10%" class="col6">test</th> </tr>
0
source

More articles:


All Articles