Unable to override border in User Agent stylesheet
For some reason I am unable to override the border in the User Agent stylesheet in Chrome. At the moment it is set to 2px, but I want it to be 0px. Boundary collapse becomes overridden only by the penalty but the border spacing.
I also tried adding -webkit-border-horizontal-spacing and -webkit-border-vertical-spacing
But these overrides don't work either.
My HTML Document
<!DOCTYPE html>
<html>
<head><link href="inventorystyle.css" rel="stylesheet" type="text/css"></head>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img src="iron-helmet.png"></td>
<td><img src="gold-helmet.png"></td>
<td><img src="diamond-helmet.png"></td>
</tr>
</tbody>
</table>
</html>
My inventorystyle.css
table {
border-collapse: collapse;
border-spacing: 0px;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
}
source to share
It's just a bug in the way Chrome shows CSS rules in developer tools. The property border-spacing
works as defined in Chrome.
In this case, if you check the item table
, the information border-spacing
will be displayed correctly. Its just for internal elements such as td
where developer tools display misleading information. The property border-spacing
does not apply to them, by definition, so its meaning to them is irrelevant anyway. And if you click "Computed", you will see that the computed styles do not contain at all border-spacing
even in the inherited properties.
In this example, the value border-spacing
on the element table
also has no effect, since a) the collapsing border model is used, and b) the HTML markup contains an attribute cellspacing="0"
that sets border-spacing
to 0
, unless you explicitly override this in CSS.
source to share