Really dumb CSS question...

[Chris74]

Hi I hope someone can point out what I'm missing here. I simply want to add a box shadow to the table-framed style, so I changed...

 

.table-framed {
border: 1px solid #DDD;
border-collapse: separate;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

 

To...

 

.table-framed {
border: 1px solid #DDD;
border-collapse: separate;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);

 

The result is that if I use both the table-striped and table-framed classes - if the bottom row is the initial colour, it ends up with square corners, if it is the alternative colour, it displays fine. If I remove the shadows, I get rounded corners again on both "stripes".

 

Do I need to add something to the table-striped styles in order to resolve this?

 

I thought about simply wrapping a table-striped table inside a div that has a border radius and a box shadow and this works, but there is an area of white space at the bottom due to the margin-bottom on the table style in the boostrap stylesheet. If I remove that - other tables will lose their margins - so I'd prefer to fix the square corner issue above if possible.

 

I'm sure I just missed something - could someone possibly point out my mistake here?

Edited July 2, 2013 by Chris74