Menu
I have a table with two simple table cells:
<table>
<tr>
<td>Test1</td>
</tr>
<tr>
<td>Test2</td>
</tr>
</table>
And I add the following CSS to the table cells:
td {
border: 1px solid #000;
background-color: #CCC;
}
For some reason when I view this in IE it shows the background on TOP of the border, if I uncheck the background in DOM explorer I can see the border is there.
I guess this has something to do with a parent element, but there are soooo many parent elements I can't paste all that code here.
Anyone has an idea what this might be?
767
With the border-style property, you can set the appereance of the border. With the border-color property, you can set the color of the border.
To specify table borders in CSS, use the border property. The example below specifies a black border for <table>, <th>, and <td> elements: The table above might seem small in some cases.
To avoid having double borders like in the example above, set the CSS border-collapse property to collapse. If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:
For zebra-striped tables, use the nth-child () selector and add a background-color to all even (or odd) table rows:
if you do not want to change the positioning, try
background-clip: padding-box;
As I expected, it was due to a position rule in CSS:
td {
position: relative
}
No idea why this is, but removing that solved it.
Took me forever to narrow down tho, which is why i started this post in the first place, to save me time. but alright fixed now :)
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With