CSS box-shadow on table rows - tr - doesn't seem to be working consistently across browsers. On some browsers the shadow is displayed; on others, there is no shadow.
I'm using the following CSS:
tr { background-color: rgb(165, 182, 229); box-shadow: 0px 2px 2px black; -moz-box-shadow: 0px 2px 2px black; -webkit-box-shadow: 0px 2px 2px black; } td, th { padding: 5px; text-align: left; } Here is a jsFiddle of the below snippet:
tr { background-color: rgb(165, 182, 229); box-shadow: 0px 2px 2px black; -moz-box-shadow: 0px 2px 2px black, ; -webkit-box-shadow: 0px 2px 2px black; } td, th { padding: 5px; text-align: left; }Note: The same behavior is observed when substituting As previously mentioned, If you'll add Then apply In summary, your code should look like this: I've omitted vendor prefixes for simplicity. Here is the full example: You can also check out the fiddle here. Please star this bug if you want to see it get fixed: https://code.google.com/p/chromium/issues/detail?id=94871 If you want the table cell widths to continue to adjust themselves automatically, you can apply the shadow to the individual cells instead: Full example here. (jsfiddle) (Inspired by https://stackoverflow.com/a/10150898/724752) In each box shadow value: Reasons behind it seem down to default CSS - the CSS / HTML / Demo I had the same issue. I was trying to highlight an entire row when the mouse was over it. Below is the css code for it: It works fine on Mozilla Firefox (38.0.1) and Internet Explorer (11.0.9600.17801), both on Windows 7. However, did not work on Chrome (43.0.2357.81). Therefore, I had to workaround and I did a mix of the answers of Sviatoslav Zalishchuk and David Winiecki. As an result I got: That works fine and it does not break the column width of the table and still working on Mozilla and Explorer. Below there is a full example: Now, in v53 Chrome it fixed and box-shadow work fine for CSS / HTML / Demo Use transform scale(1,1) property with box-shadow it will solve the problem. Fiddle: https://jsfiddle.net/ampicx/5p91xr48/ Thanks!! I wanted a box-shadow on the left side of the row when hovered: I fixed it simply by setting the box-shadow on the first cell in the row. Like this: I've tried it in Firefox, Chrome, and IE9. Seems to work fine. If you want a 1px wide border around the whole row you could do something like: with display: table-row. 回答1:
box-shadow property works only with elements that have display: block or display:inline-block property.display: block to the table cell as a general styling rule, it will collapse, since automatic width/height proportions that cells had with display:table won't be applied anymore. To simulate that behavior just assign min-width attribute to each th and td.box-shadow to the row (on hover or without).table { box-sizing: border-box; } td, th { padding-left: 16px; min-width: 170px; text-align: left; } tr { display: block; } tr:hover { box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.5); cursor: pointer; } table { box-sizing: border-box; border-bottom: 1px solid #e8e8e8; } td, th { padding-left: 16px; min-width: 170px; border: 1px solid #e8e8e8; border-bottom: none; font: 14px/40px; text-align: left; } td { color: #666; } tr { display: block; } th { color: #333; } tr:hover { background-color: #fbfbfb; box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5); cursor: pointer; }Phone number Date Name Label 0342443 10 August 2013 Kate Loves cats 0342442 9 August 2013 Mary Boring 0342441 8 August 2013 Anna Loves extreme stuff 回答2:
td:first-child { box-shadow: inset 0px 11px 8px -10px blue, inset 0px -11px 8px -10px blue, inset 11px 0px 8px -10px blue; } td { box-shadow: inset 0px 11px 8px -10px blue, inset 0px -11px 8px -10px blue; } td:last-child { box-shadow: inset 0px 11px 8px -10px blue, inset 0px -11px 8px -10px blue, inset -11px 0px 8px -10px blue; } 回答3:
display: block was the biggest factor.tr { background-color: rgb(165, 182, 229); display: block; margin-bottom: 5px; -moz-box-shadow: 0px 2px 2px black; -webkit-box-shadow: 0px 2px 2px black; box-shadow: 0px 2px 2px black; } td,th { padding: 5px; text-align: left; }回答4:
tr:hover { outline: none; -webkit-box-shadow: inset 0 0 10px #337AB7; box-shadow: inset 0 0 10px #337AB7; } @media screen and (-webkit-min-device-pixel-ratio:0) { tr:hover td:first-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset 11px 0px 8px -10px #337AB7; } tr:hover td { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7; } tr:hover td:last-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset -11px 0px 8px -10px #337AB7; } } tbody > tr:hover { outline: none; -webkit-box-shadow: inset 0 0 10px #337AB7; box-shadow: inset 0 0 10px #337AB7; } table { box-sizing: border-box; border-collapse: collapse; } td, th { padding-left: 10px; padding-right: 10px; border: 1px solid #dddddd; font: 14px; text-align: left; } /*To work only on Chrome and Safari*/ @media screen and (-webkit-min-device-pixel-ratio:0) { tr:hover td:first-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset 11px 0px 8px -10px #337AB7; } tr:hover td { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7; } tr:hover td:last-child { box-shadow: inset 0px 11px 8px -10px #337AB7, inset 0px -11px 8px -10px #337AB7, inset -11px 0px 8px -10px #337AB7; } } /*To work on the others browsers*/ tbody > tr:hover { outline: none; -webkit-box-shadow: inset 0 0 10px #337AB7; box-shadow: inset 0 0 10px #337AB7; }Name Born City David Gilmour 6 March 1946 Cambridge, England Roger Waters 6 September 1943 Surrey, England Nick Mason 27 January 1944 Birmingham, England Richard Wright 28 July 1943 London, England 回答5:
table { border-spacing: 0 10px; border-collapse: separate; } tbody { display: table-row-group; vertical-align: middle; } tr { margin-bottom: 9px; } tr:hover { box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35); -webkit-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35); -moz-box-shadow: 0 5px 8px 0 rgba(50, 50, 50, 0.35); }# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 回答6:
tr:hover { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); box-shadow: 0px 0px 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); } 回答7:
tr:hover { background: #EEF0F3; cursor: pointer; } tr:hover td:first-child { box-shadow: inset 2px 0 0 0 #323335; } tr:hover td { box-shadow: 0 1px 0 0 black, 0 -1px 0 0 black; } tr:hover td:first-child { box-shadow: 0 -1px 0 0 black, -1px 0 0 0 black, 0 1px 0 0 black; } tr:hover td:last-child { box-shadow: 0 -1px 0 0 black, 1px 0 0 0 black, 0 1px 0 0 black; } 