Search code examples
htmlcsshtml-tablebackground-colorborder-box

Box-shadow on table row hides "under" next row when next row is colored

Using the following source code, I have two problems :

  1. as is, the bottom shadow do not appear, except on the last row

    enter image description here enter image description here

  2. if I transfer the background-color:white; statement from the TD element to the TR element, then the shadow works everywhere, except on the one before the row containing the 'special' DIV.

    enter image description here enter image description here

It would be very difficult to change the way the app I'm working on constructs the table, so I can't move the special1 and special2 classes from the DIVs.

How may I do to make this highlight work in any situation ?

Source code

<HTML>
<BODY>
<HEAD>
<STYLE>
TR {
    line-height: 15px;
    background-color:white;
}

TD {    
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #333;
    height: inherit;
}

DIV.special1 {
    background-color:orange;
    float:left;
}

DIV.special2 {
    background-color:red;
}

TD.highlighted, TR.highlighted {
    -moz-box-shadow: 0px 0px 20px #333333;
    -webkit-box-shadow: 0px 0px 20px #333333;
    -o-box-shadow: 0px 0px 20px #333333;
    box-shadow: 0px 0px 20px #333333;
}
</STYLE>

<SCRIPT>
function highlight(id) {
    if (document.getElementById(id).className.indexOf("highlighted") == -1) document.getElementById(id).className += "highlighted";
}

function unhighlight(id) {
    document.getElementById(id).className = document.getElementById(id).className.replace("highlighted", "");
}
</SCRIPT>
</HEAD>

<TABLE width="200" BORDER="0" cellspacing="0" cellpadding="0">
<TR><TD id="1" onmouseover="highlight(1);" onmouseout="unhighlight(1);"><DIV>test test test</DIV></TD></TR>
<TR><TD id="2" onmouseover="highlight(2);" onmouseout="unhighlight(2);"><DIV>test test test</DIV></TD></TR>
<TR><TD id="3" onmouseover="highlight(3);" onmouseout="unhighlight(3);"><DIV>test test test</DIV></TD></TR>
<TR><TD id="4" onmouseover="highlight(4);" onmouseout="unhighlight(4);"><DIV class="special1">test test test</DIV><DIV class="special2">test test test</DIV></TD></TR>
<TR><TD id="5" onmouseover="highlight(5);" onmouseout="unhighlight(5);"><DIV>test test test</DIV></TD></TR>
</TABLE>
</BODY>
</HTML>
Solution

  • Add relative positioning to the .highlighted element jsFiddle Demo

    td.highlighted, tr.highlighted {
  -moz-box-shadow: 0px 0px 20px #333333;
  -webkit-box-shadow: 0px 0px 20px #333333;
  -o-box-shadow: 0px 0px 20px #333333;
  box-shadow: 0px 0px 20px #333333;
  position: relative;
}