How can I give my table header a border-radius on chrome browser?
that the table headers are slightly different between chrome and Firefox.
1. Firefox browser applied border-radius around the table but chrome browse only applied the border-radius to bottom and not top of the table.
2. I have tried using using border spacing, border-collapse but still the same even VS code is not applying the border-radius.
https://codepen.io/ajanaku007/pen/YzRwgrR
I don’t know why both browser are showing two different
3 Replies
I don't have a direct answer for you but what is happening here is that Chrome is applying the border radius however it is applying it to the whole table including the caption whereas Firefox is not including the caption. As your caption has a transparent background, you can't see the border radius.
To be honest I feel that it is actually Firefox that it is not applying the style correctly as the caption forms part of the table so it makes sense that it should get the styles.
I'm sure somebody can explain the reasoning behind this, I will admit that I am not overly familiar with styling tables beyond the basics (though I will keep investigating).
On further consideration I can see why Firefox does it like this. I noticed that the caption also doesn't get the box-shadow and, presumably, other general styles.
In the meantime, a simple solution would be to move the caption outside of the table but there may be reasons as to why you need/want it to be part of the table.
the MDN
border-radius article has this line that seems relevant:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radiusThank you everyone I had a slight problem with my ISP but now everything has been resolved. I used a browser extension PESTICIDE to check my webpage and I discovered the caption element has the border-radius but wasn't showing because it doesn't have a background-color