Невозможно? HTML <TD>при наведении курсора на изменение цвета с помощью border-collapse?

Question

Мне бы хотелось иметь таблицу, в которой все границы (внутренние / внешние) имеют ширину в один пиксель, я добиваюсь этого, установив стиль border-collapse для таблицы.

Тогда я хочу onmouseover каждую ячейку TD, меняя border-color на другой цвет. Это прекрасно работает, если граница таблицы не была свернута. Но если вы разрушите границу, она не будет работать.

Однако, если я не сверну границу, я не смогу получить границу шириной в один пиксель!

Так это невозможно?

РЕДАКТИРОВАТЬ: для уточнения, при использовании сжатия границы и установке цвета границы TD, устанавливаются только правая и нижняя границы.

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ: я в конечном итоге реализовать это изменение фона при наведении курсора. Фон GIF - это белая рамка с рамкой. UUUUGGH! Хотя прекрасно работает во всех браузерах ...

Answer 1

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

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

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

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

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

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

Answer 2

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

Answer 3

Да, я тоже знаю, что это старый пост .. Я сделал это таким образом, что работает во всех браузерах! Просто создайте элемент, пусть он будет #cellsel. Не забудьте установить абсолютное или относительное позиционирование и установить соответственно левый и верхний уровни и z-индекс, отображать в ноль (чтобы он был сначала невидимым). Теперь стратегия состоит в том, чтобы использовать jquery для прикрепления #cellsel к тд при наведении курсора мыши ... хуже всего - поиграть с событиями mouseenter / mouseleave / mousemove и переменной флага, чтобы проверить, когда мышь покинула конкретный тд ...

  $('***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! Чтобы убедиться, что граница обрушена, примените такой 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'});