Блог

Главная - Вопросы по программированию - Проблемы со строкой таблицы и границами colgroup

Проблемы со строкой таблицы и границами colgroup

#javascript #html #css-tables

#javascript #HTML #css-таблицы

Вопрос:

У меня есть таблица (здесь fiddle), в которой есть некоторый javascript, который применяет hover класс к соответствующей colgroup и строке при наведении курсора мыши. Это должно отображаться как a внутри таблицы, т.Е. Столбец выделен, а строка.

К сожалению, при применении границ (вторая скрипка) это становится немного странным, когда вы наводите курсор мыши на несколько ячеек (я смотрю в Chrome). Кто-нибудь может понять, почему это происходит?

Я пытался закомментировать border-collpase свойство, но это не сработало.

 .hover {
    background: #f0f0f0;
    background: #f4f4f4;
}
colgroup.hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
tr.hover{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

Ответ №1:

Прокомментируйте последние два свойства css, как показано в fiddle1

 /*colgroup.hover {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
tr.hover{
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}*/

Комментарии:

1. Если вы это сделаете (см. Вторую скрипку), то после нескольких наведений (перемещение мыши по экрану) вы начнете видеть визуальные артефакты, и это не сработает.

2. замените css fiddle2 на fiddle1 и посмотрите, что @Chris

Ответ №2:

Вот быстрое решение. Попробуйте добавить эти правила.

 colgroup {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}


tr {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

Причина, по которой у вас возникают странные эффекты, заключается в том, что границы изменяют размеры блоков.

Добавляя белые границы (или те, которые соответствуют подложке), вы просто меняете цвета без изменения размеров.

Редактировать:

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

Метки: