box-shadow on <tbody> in Chrome?

I've been trying for about an hour to get chrome to pick up my box-shadow (and browser-specific variants) in Chrome applied to the <tbody> tag, but its not working. I'm getting exactly what I expect in all other browsers (a shadowed box in Firefox, nothing 开发者_运维百科in IE6 or IE7)... Chrome is also not rendering any border styles to my <tbody> tag... Are there limitations on this tag itself or have I done something wrong?

I'm not sure what repercussions (if any) it will have, but simply setting display: block on tbody fixes it in Chrome (and Opera, where it also didn't work):

See: http://jsfiddle.net/nuXgg/1/

There is a simple and elegant solution :)

         table {
           border-collapse:collapse;
         }         

         table tbody td {
           position: relative;
           background-color: white;
         }

         table tbody td:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          box-shadow: 2px 2px 5px lightgray;
        }

Every td has an :after element with its own shadow, so providing td's have background colors the whole tbody will have a nice shadow and the grid does not brake.

live jsfiddle example

Since this issue is still actual today here is the solution without using display:block thus sacrificing autosize feature of the table.

http://jsfiddle.net/MSVkn/1/

Apply the styles for table{} instead of tbody{}, then style thead{} separately.

http://jsfiddle.net/ijasnijas/TsSmM/2/

hope this helps :)

jQuery-based solution: http://jsfiddle.net/gZLgz/

The code will add div with shadow behind each tbody on a page.

var tbodyShadow = function(){
  $('table').each(function(){      
    var $table = $(this),
      tableIndex = $('table').index(this);
      $tbody = $('tbody', this),
      tbodyWidth = $tbody.outerWidth(),
      tbodyHeight = $tbody.outerHeight(),
      tbodyPosition = $tbody.offset();
      $shadow = $('<div/>', {'class': 'table-shadow-' + tableIndex});
      if(!$table.hasClass('shadow-processed')){
        $shadow.appendTo('body'); 
      }
      $('.table-shadow-' + tableIndex)
        .height(tbodyHeight)
        .width(tbodyWidth)
        .css({'position': 'absolute', 'z-index': '1'})
        .css({'left': tbodyPosition.left, 'top': tbodyPosition.top})
        .css({'box-shadow': '0 0 10px -3px black'});
      $table
        .css({'position': 'relative', 'z-index': '2'})
        .addClass('shadow-processed');
  });
};
$(window).load(tbodyShadow);
$(window).resize(tbodyShadow);

If you want to style the tbody you can do this:

table {
   position: relative;
}

table tbody:before {
   box-shadow: 0px 0px 6px rgba(0,0,0,0.1);
   content: ' ';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
}

By setting the box shadow in either :before or :after solves the problem. Tested it in Chrome, Safari, Firefox and seems to work.