Giovanni Battista Lenoci wrote:
Hi, don't know if is a jquery related problem, but can you help me?
I've a table, like this:
<table>
....
<tbody>
<tr class="record">
<td class="new">
Test
</td>
<td class="old">
Test
</td>
</tr>
</tbody>
</table>
Then in my js:
$(".new").hover( function() { $(this).addClass("hover") }, function() {
$(this).removeClass("hover") } );
my hover class is
.hover {
border-bottom:1px solid red;
}
I can see in firebug the class in the markup, but the border doesn't appear.
If I add in the markup the class hover I can see appear and disappear the border.
I noticed the problem if my table as the css property border-collapse:collapse.
You already answered your question. The reason ist most probably the
border-collapse property.
A value of "collapse" for that property means that a border of two
adjacent cells collapses into one border, following certain rules
defined in the CSS spec, see border conflict resolution:
http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution
Say you have a white background. One cell has a white border, the other
cell a black one. If the borders are to collapse it might happen that
the white one gets shown, so that it seems there is no border. But not
only colors affect that, if you declare "hidden" as border style for one
cell it may make collapsing borders disappear.
General information:
http://www.w3.org/TR/CSS21/tables.html#collapsing-borders
Last not least, the whole issue isn't implemented consistently cross
browser of course.
HTH, Klaus
