Chrome 中 <tbody> 上的框阴影？答案

【问题标题】：box-shadow on <tbody> in Chrome?Chrome 中 <tbody> 上的框阴影？
【发布时间】：2011-02-08 21:05:38
【问题描述】：

我已经尝试了大约一个小时让 chrome 获取我在 Chrome 中应用于 <tbody> 标签的 box-shadow（和特定于浏览器的变体），但它不起作用。我在所有其他浏览器中得到的正是我所期望的（Firefox 中的阴影框，IE6 或 IE7 中没有）...... Chrome 也没有为我的<tbody> 标签呈现任何边框样式......这有限制吗标签本身还是我做错了什么？

【问题讨论】：

一些示例代码可以让我们更快地对其进行测试。
这里有一些合理的示例代码：jsfiddle.net/nuXgg
我做了一个类似的示例：jsfiddle.net/CX55p/3 我可以确认 box-shadow 不适用于 tbody 元素，但边框样式似乎很好（除了它们在Chrome 比 Firefox）。
我在这里发布了一个解决方案：stackoverflow.com/a/38083364/1494428

标签： html google-chrome css

【解决方案1】：

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

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

【讨论】：

这绝对不是被问到的。
如果你再聪明一点，你就会明白这是怎么一回事。我的方法在不使用“display:block” harakiri 的情况下完全有效。
不错的解决方案，但不幸的是表格底部有一个垂直边距。我无法在不弄乱盒子阴影的情况下将其删除。

【解决方案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

【讨论】：

我不得不补偿头部的高度：tbody:after { <br> content: ''; position: absolute; top: 33px; // height of thead left: 0; width: 100%; height: ~"calc(100% - 33px)"; z-index: -1; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); }

【解决方案3】：

我不确定它会产生什么影响（如果有的话），但只需在 tbody 上设置 display: block 即可在 Chrome（和 Opera，它也无法正常工作）中修复它：

见：http://jsfiddle.net/nuXgg/1/

【讨论】：

显示：块方法对我有用，除了强迫我手动定义列宽。没什么大不了的。谢谢！很抱歉没有提供示例代码。我正在使用的东西是我公司专有的，我没有时间清理它:)
这次没有示例代码也没问题，因为这是一个简单的问题。通过示例代码您将更快地获得答案，因此最好包含在内。
这个解决方案有一个很大的警告。您在 thead 和 tbody 中的列将不再相互对应。像这样jsfiddle.net/ENKy5
@Mroz：真烦人。我想如果你需要box-shadow，你将不得不根本不使用thead 和/或tbody。它们不是严格要求的，即使它们是良好的做法。

【解决方案4】：

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

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

希望这会有所帮助:)

【讨论】：

【解决方案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);

【讨论】：

【解决方案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 中进行了测试，似乎可以正常工作。

【讨论】：