0

box-shadow is not working in Chrome.

I have a table layout in which I have to use display property as table-row-group. I am trying to put box-shadow in tbody and it's failing. Please see it here - JSFiddle.

It's working perfectly fine in FF but not in Chrome. I looked on other questions/suggestions and it looks like we can do it in display: block property.

Any workaround for display: table-row-group?

famousgarkin
  • 13,687
  • 5
  • 58
  • 74
Mayank
  • 112
  • 8
  • Based on [other similar questions](http://stackoverflow.com/a/5605612/976897) on StackOverflow, I think `display:block` seems to be your only option, just like you mentioned. Seems like there is [a bug issued](https://code.google.com/p/chromium/issues/detail?id=62445) on Chromium bug tracker to fix this. – Chirag Bhatia - chirag64 Jun 25 '14 at 06:11
  • Thanks Chirag, But unfortunately I can't use display:block as it is going to impact my whole layout. Basically in table there are multiple tbody and need to use table-row-group. – Mayank Jun 25 '14 at 06:15
  • @Mayank I've tried your demo in FireFox, looks like that kind of effect is not really impressive and also can be achieved easily with a box-shadow style applied on the `td` elements, check this demo http://jsfiddle.net/viphalongpro/w4p5L/12/ – King King Jun 25 '14 at 06:27
  • thanks, but this fix only provides shadow in td, not on whole tr and a gap is clearly visible, which we don't want. – Mayank Jun 25 '14 at 06:46
  • @Mayank as I said, what the demo I posted looks almostly exactly to what FireFox renders your demo. – King King Jun 25 '14 at 06:47
  • @KingKing there is a small tweak in it. In FF, we can see shadow under whole tr, but by applying shadow on td means showing shadow under td only. – Mayank Jun 25 '14 at 06:54
  • 1
    @Mayank I did not look into the effect carefully, looks like it's not easy to achieve the exact effect, I've just tried playing with pseudo-elements hack however it's not really good, it may be acceptable (depending on your requirement) http://jsfiddle.net/viphalongpro/w4p5L/16/ Anyway I have to say that table is a hard-to-style element, it's almost because of bug in how the browsers implement their CSS features. It's a pity that we can't play with pseudo-elements on the `tbody`, it's buggy indeed. So if each group has more than 1 row, the whole group is hardly styled. – King King Jun 25 '14 at 07:49

2 Answers2

0

You could create a div within the th or tr tag as a workaround and assign a box-shadow to the div instead. I've implemented this in this JSFiddle to the first th element.

Chirag Bhatia - chirag64
  • 4,430
  • 3
  • 26
  • 35
  • Thanks chirag. It works fine, but again it's a shadow under the div only not on whole row. which is the actual need for it. – Mayank Jun 25 '14 at 06:47
0

Try this:

tbody {

 -webkit-box-shadow:  5px 5px 3px green;
 -moz-box-shadow:  5px 5px 3px green;
  box-shadow:  5px 5px 3px green;
  display: block

}

It works.

Alagarasan M
  • 907
  • 8
  • 16
  • as I mentioned earlier, I can't use display:block, it breaks my whole layout. you can see it here. http://jsfiddle.net/w4p5L/15/ – Mayank Jun 25 '14 at 07:24