Проблема в FF при наведении на строку таблицы

#html #css

При наведении на строку таблицы она должна выделяться красной 2px рамкой.
Везде все хорошо показывает, а в FF правый нижний и левый нижний уголки не показываются
(обрезаются)



Из-за чего может быть?

Проверил в Хром, Опера, Сафари, ИЕ такого нет.

Код на jsFiddle  

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table > tbody > tr {
    border: 2px solid transparent;
}

table > tbody > tr > td {
    border-right: 1px solid #ddd;
    padding: 10px;
}

table tr:hover {
    border-left: 2px solid #C0504E;
    border-right: 2px solid #C0504E;
    cursor: pointer;
}

table tr:hover td {
    border-top: 2px solid #C0504E;
    border-bottom: 2px solid #C0504E;
    cursor: pointer;
}


Еще вопрос: почему для последней ячейки не надо писать следующее

table > tbody > tr > td:last-child { border-right: none; }

    

Ответы

Ответ 1

Попробуйте использовать outline вместо border.

table tr:hover {
    outline: 2px solid #C0504E;
    cursor: pointer;
}


table tr:hover td удаляйте.

outline в отличие от border не занимает места, поэтому не требуется везде ставить
одинаковую ширину рамки, чтобы контент "не прыгал" при наведении мышкой.

Дополнительный плюс в том, что не остаются незакрашенными вертикальные серые линии.

https://jsfiddle.net/0dev/nnef1084/4/

Ссылки по теме:


https://webref.ru/css/outline
https://developer.mozilla.org/en-US/docs/Web/CSS/outline


Ответ 2

Тестируйте:



table {
  border-collapse: separate;
  border-spacing: 0;
}

table > tbody > tr > td {
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

table > tbody > tr > td:first-child {
  border-left: 2px solid transparent;
}

table > tbody > tr > td:last-child {
  border-right: 2px solid transparent;
}

table > tbody > tr > td {
  border-right: 1px solid #ddd;
  padding: 10px;
}

table > tbody > tr:hover {
  cursor: pointer;
}

table > tbody > tr:hover > td {
  border-top: 2px solid #C0504E;
  border-bottom: 2px solid #C0504E;
}

table > tbody > tr:hover > td:first-child {
  border-left: 2px solid #C0504E;
}

table > tbody > tr:hover > td:last-child {
  border-right: 2px solid #C0504E;
}

  

    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
    
    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8