html – box-shadow on <tbody> in Chrome?-ThrowExceptions

Exception or error:

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?

How to solve:

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):



There is a simple and elegant solution 🙂

         table {

         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.


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

hope this helps 🙂


jQuery-based solution:

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

var tbodyShadow = 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});
      $('.table-shadow-' + tableIndex)
        .css({'position': 'absolute', 'z-index': '1'})
        .css({'left': tbodyPosition.left, 'top':})
        .css({'box-shadow': '0 0 10px -3px black'});
        .css({'position': 'relative', 'z-index': '2'})


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.

Leave a Reply

Your email address will not be published. Required fields are marked *