css - Impossible? HTML <TD> mouseover border-color change with border-collapse? - Stack Overflow

I have wish to have a table where all borders (internal/external) are a single pixel in width, I achieve this by setting the border-collapse style on the table.

Then I wish to onmouseover each TD cell, changing the border-color to a different color. This works fine if the table border has not been collapsed. But if you collapse the border then it fails to work.

However if I don't collapse the border then I can't get a single pixel width border!

So is this impossible?

EDIT: To clarify, when using border-collapse, and setting TD border color, only the right and bottom border are set.

EDIT EDIT: I ended up implementing this changing the background on mouseover. The background GIF is a white box with a border. UUUUGGH! Works perfectly in all browsers though ...

Answers：

I have wish to have a table where all borders (internal/external) are a single pixel in width, I achieve this by setting the border-collapse style on the table.

Then I wish to onmouseover each TD cell, changing the border-color to a different color. This works fine if the table border has not been collapsed. But if you collapse the border then it fails to work.

However if I don't collapse the border then I can't get a single pixel width border!

So is this impossible?

EDIT: To clarify, when using border-collapse, and setting TD border color, only the right and bottom border are set.

EDIT EDIT: I ended up implementing this changing the background on mouseover. The background GIF is a white box with a border. UUUUGGH! Works perfectly in all browsers though ...

Answers：

I realize this is a really old post, but thought I'd contribute anyway in case it is helpful.

Don't know how you got a background image w/border to work unless you're using pixel-precise widths and heights for all table cells?

But another option is to use "outline" instead of border on hover. Ex.:

table { border-collapse: collapse; }
table td { border: solid 1px gray; }
table td:hover { border: none; outline: solid 1px red; }

Works in all browsers except IE6.

Depending on the color you use, the appearance might not be ideal but it works pretty well.

Answers：

Is there any way you can forego the use of a table altogether and use divs instead? It's a little more painful as far as the initial set-up goes, but in the end I think you might find that it's easier to manipulate in the long-run.

Answers：

yep i know too it's an old post.. i did this in a way that works on all browsers! Just creat an element, let it be #cellsel. Dont forget to set the positioning to absolute or relative and set accordingly the left & top propieties and the z-index, display to none (to be invisible at first). Now the strategy is to use jquery to attach #cellsel over the td when the mouse hovers..., the worst part is to play with the events of mouseenter/mouseleave/mousemove and a flag variable to verify when the mouse left a particular td...

  $('***td selector***').mouseenter(
  function(e){
  var $this= $(this);

  if(!ins){//global variable ins -- this is our flag!
    var off= $this.offset();
    var w= $this.width()-1;
    var h= $this.height()-1;
    //#cellsel is the element i created to draw over a td when the mouse hovers a particular td..
    $('#cellsel').css({'top':off.top+'px', 'left':off.left+'px', 'width':w+'px', 'height':h+'px', 'display':'block'});
    ins=true;

    $this.bind('mouseleave',function(){
      $(this).unbind('mouseleave');
      ins=false;
    });
  }//#grid is the table!
  }).parents('#grid').mousemove(
      function(e){
        if(ins){
          var $this= $(this).find('#cellsel');
          var off= $this.offset();
          var w= $this.width();
          var h= $this.height();

          if( (e.pageX < off.left) || (e.pageY < off.top) || (e.pageX > (off.left + w)) || (e.pageY > (off.top + h)) )
            ins=false;                    
        }
    });

I'd appreciate if someone else brings a correction to this or a better answer... thanks! Also, it is not necessary to use tables u can accomplish the same thing using nested divs and the css float left! To ensure the border collapse apply some jquery like this:

$('***selector to all divs except the ones with the css clear propiety set***').css({'float': 'left', 'width': '100px', 'border': '1px solid #CCC','margin-bottom':'-1px','margin-right':'-1px'});