Question

我已经尝试了大约一个小时的时间来获取Chrome以获取应用于<tbody>标记的Chrome中的盒子阴影（以及特定于浏览器的变体），但它不起作用。我得到的正是我期望的所有其他浏览器（Firefox中的阴影框，IE6或IE7中没有任何内容）...... Chrome也没有为我的<tbody>标记渲染任何边框样式......是否存在局限性在这个标签本身或我做错了什么？

Answer 1

我不确定它会产生什么影响（如果有的话），但只需在display: block上设置tbody即可在Chrome中修复它（以及Opera，它也无效）：< / p>

请参阅：http://jsfiddle.net/nuXgg/1/

Answer 2

有一个简单而优雅的解决方案：）

         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;
        }

每个td都有一个带有自己阴影的:after元素，因此提供td's背景色会使整个tbody有一个漂亮的阴影，并且网格不会制动。

live jsfiddle example

Answer 3

由于今天这个问题仍然存在，因此这里的解决方案是不使用display:block，从而牺牲了表的自动调整功能。

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

Answer 4

应用table{}而不是tbody{}的样式，然后分别设置样式thead{}。

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

希望这有助于：）

Answer 5

基于jQuery的解决方案： http://jsfiddle.net/gZLgz/

代码将在页面上的每个tbody后面添加带阴影的div。

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

Answer 6

如果您想对tbody进行样式设置，可以这样做：

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;
}

通过在：before或：after之后设置框阴影可以解决此问题。在Chrome，Safari，Firefox中对其进行了测试，并且似乎可以正常工作。

Chrome中的box-shadow？

6 个答案: