Невозможно? HTML <TD> изменение цвета границы при наведении курсора на изменение границы?

Есть ли способ вообще отказаться от использования таблицы и вместо этого использовать div? Это немного болезненнее с точки зрения начальной настройки, но в конце, я думаю, вы можете обнаружить, что в долгосрочной перспективе легче манипулировать.

Я понимаю, что это действительно старый пост, но подумал, что все равно внесу свой вклад, если он будет полезен.

Не знаете, как у вас работает фоновое изображение с рамкой, если вы не используете точную ширину и высоту в пикселях для всех ячеек таблицы?

Но другой вариант - использовать «контур» вместо границы при наведении курсора. Бывший.:

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

Работает во всех браузерах, кроме IE6.

В зависимости от цвета, который вы используете, внешний вид может быть не идеальным, но он работает довольно хорошо.

да, я тоже знаю, что это старый пост .. Я сделал это так, что работает во всех браузерах! Просто создайте элемент, пусть это будет #cellsel. Не забудьте установить позиционирование на абсолютное или относительное и соответственно установить левую и верхнюю части и z-index, display на none (чтобы быть невидимым вначале). Теперь стратегия состоит в том, чтобы использовать jquery для прикрепления #cellsel к td при наведении курсора мыши ..., худшая часть - играть с событиями mouseenter / mouseleave / mousemove и переменной флага, чтобы проверить, когда мышь покинула конкретный 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;                    
        }
    });

Буду признателен, если кто-то другой внесет исправление в это или лучший ответ ... спасибо! Кроме того, нет необходимости использовать таблицы, вы можете сделать то же самое, используя вложенные блоки div и оставленный css float! Чтобы обеспечить обрушение границы, примените такой jquery:

$('***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'});