盒子阴影在tr的 [英] box-shadow on tr's

问题描述

我在将 box-shadow 放在表中的 tr 上时遇到问题。问题是 box-shadow 根本不显示，除非显示所有 tr s设置为 block （'fix'我在这里找到：

从技术上讲，这不是一个表格，只是出现这样。 p>

I am having problems putting a box-shadow on trs inside a table. The problem is that the box-shadow doesn't show up at all unless the display of all the trs of the table is set to block (a 'fix' I found here: Box Shadow inside TR tag). However, when the display of trs is set to block, it makes the table cells no longer line up, crowding all to the left.

Here's a fiddle demonstrating the problem: http://jsfiddle.net/jFdEY/

You can try changing it to apply to all trs but that causes another problem (in the second picture below).

---

Here's some pictures:

The one without display: block on all the trs (table displays properly but box-shadow doesn't work)

The one with display: block on all the trs (box-shadow shows up but the table layout is broken)

So, is there a way around this?

解决方案

"Many of the elements used within tables are neither block nor inline elements."

For this reason setting all TR to block is most likely breaking the natural table behavior.

EDIT: I was able to create a solution similar to your desired effect however it requires that the columns have fixed width.

Demo: http://jsfiddle.net/jFdEY/2/

Technically this isn't a table anymore though, just appears as such.

这篇关于盒子阴影在tr的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！