Цвет границы строки таблицы CSS с помощью border-collapse - PullRequest
Новая
       36

Цвет границы строки таблицы CSS с помощью border-collapse

9 голосов
/ 30 октября 2011

Я видел несколько постов на эту тему здесь, и я прочитал спецификацию W3C по разрешению конфликтов в стиле границы (и, признаюсь, я не до конца понял), и я не уверен, как этого добиться. что я хочу.

При наведении на строку я хочу изменить цвет рамки вокруг ряда. Я догадался, что лучший кросс-браузерный способ сделать это - изменить цвета границы тд в этом ряду. Однако я не могу выполнить его так, чтобы верхняя граница строки также изменилась.

Вот мой CSS: 

#dataGrid table {
border: 1px solid #cacac8; /* I've tried it with and without this border setting */
table-layout: fixed;
border-collapse: collapse;
}

#dataGrid td {
    border: 1px solid #cacac8;
    padding: 8px 11px 7px 11px;
    text-align: left;
}

#dataGrid .cellHovered {
    border-top: 1px solid #425474;
    border-bottom: 1px solid #425474;
}

#dataGrid .cellFirstHovered {border-left: 1px solid #425474;}
#dataGrid .cellLastHovered {border-right: 1px solid #425474;}

и мой JQuery: 

$('div#dataGrid tr.dataRow').hover(
        function () {
            $(this).children('td').addClass('cellHovered');
            $(this).children('td:first').addClass('cellFirstHovered');
            $(this).children('td:last').addClass('cellLastHovered');
        },
        function() {
            $(this).children('td').removeClass('cellHovered');
            $(this).children('td:first').removeClass('cellFirstHovered');
            $(this).children('td:last').removeClass('cellLastHovered');
    });

1 Ответ

22 голосов
/ 30 октября 2011

Во-первых, вам лучше не использовать jQuery, а вместо этого использовать чистый CSS: 

#datagrid tr.datarow:hover td {
    border: whatever;
}

Далее, поскольку вы используете границы 1px, попробуйте этот трюк: 

#datagrid tr.datarow:hover td {
    border-style: double;
}

Так как double "более отчетливый", чем solid, его цвет имеет приоритет над ячейками вокруг него и в любом случае выглядит идентично solid; *

...