CSS表格具有边框合拢的行边框颜色 [英] CSS Table Row border color with border-collapse

问题描述

我在这里看到几个帖子的主题，我已经阅读了W3C规范边框风格冲突解决（并承认，我不完全得到它），我不知道如何实现我想要的是。

I've seen several posts here on the subject, and I've read the W3C spec on border style conflict-resolution (and admit, I don't fully get it), and I'm not sure how to achieve what I want.

在行悬停时，我想更改行周围的边框颜色。我已经推测最好的跨浏览器的方式来做，它是改变td边框颜色在该行。但是，我似乎无法执行它的行的顶部边框也改变。

On row hover, I want to change the color of the border around the row. I have surmised the best cross-browser way to do it is change the td border colors in that row. However, I can't seem to execute it in a way where the row's top border also changes.

这是我的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');
    });

推荐答案

首先，你最好不要使用jQuery而不是使用纯CSS：

Firstly, you might be better off not using jQuery and instead using pure CSS:

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

接下来，由于你使用的是1px边框， p>

Next, since you're using 1px borders, try this trick:

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

由于 double 更明显，然后 solid ，它的颜色优先于它周围的单元格，并且看起来与 solid 完全相同;

Since double is "more distinct" then solid, its colour takes precedence over cells around it, and looks identical to solid anyway ;)

这篇关于CSS表格具有边框合拢的行边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！