CSS border radius and border collapse [duplicate]

Question

I'm trying to have a table with a border-radius of 12px set in CSS. There is no border on the tr or td within the table, just the one border around the whole lot. I want the first row in the table to have a border-radius on the top 2 corners but not on the bottom 2 (so it is like a header for the table) which I have managed to do. However, this is creating a white border between the table and this first row - I want them to be right up to each other without the white border as the header row has a coloured background.

I've tried using border-collapse to do this, but this cancels out the border-radius on the overall table, making the header row rounded on the top 2 corners but inside a squared off table.

This is quite difficult to explain so an example can be found here. You can see the white border between the table and the row with the blue background.

Has anyone got any ideas how to get rid of the border without border-collapse? Thanks in advance

Answer 1

Try this:

<table class="admin" style = "border-spacing:0px;">

Obviously you can pull that inline style out into its own class, but I wanted to explicitly show you that border-spacing on the table is what you're after.

You should/could add some padding to the content inside the table if you don't want the text to be snug against the table's border.