CSS table tr placez une couleur ou à la frontière et td placez une autre couleur/sans frontière

Vous pouvez faire votre original réticule idée avec juste CSS (sans Javascript). Utiliser le ::before et ::after pseudo-éléments pour la mise en évidence. Il y a un léger problème avec Firefox avec cette méthode, j'ai donc rédigé une solution pour elle.

border-collapse: collapse rend les frontières sur <tds> se comporter de façon étrange. Au lieu de cela, mettez vos frontières sur le <trs> et <cols>. border-collapse: collapse également à couper les bords. Pour traiter de ce que vous avez à faire preuve de créativité et de tirer une des frontières supplémentaires sur tout l'extérieur <tds> et <ths>. Encore plus étrange, il "mange" un pixel sur le dessus et deux pixels sur le fond. Si vous avez besoin 3px sur le dessus pour obtenir un 2px frontière, et 4px sur bas pour obtenir un 2px frontière.

Démo:

CSS:

table {
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .row, .col, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}
tr:last-child td {
border-bottom: 4px solid black;
}
tr, col {
border: 2px solid black;
}
th {
border-top: 3px solid black;
}
th:last-child, td:nth-child(3n) {
border-right: 4px solid black;
}
td:first-child, th:first-child {
border-left: 3px solid black;
}
td:hover {
border: 2px solid red;
}
td:hover:first-child {
border-left: 3px solid red;
}
td:hover:nth-child(3n) {
border-right: 4px solid red;
}
tr:last-child td:hover {
border-bottom: 4px solid red;
}
td:hover::before,
.row:hover::before,
.ff-fix:hover::before { 
background-color: #ffa;
content: '\00a0';  
height: 100%;
left: -5000px;
position: absolute;  
top: 0;
width: 10000px;   
z-index: -1;   
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after { 
background-color: #ffa;
content: '\00a0';  
height: 10000px;    
left: 0;
position: absolute;  
top: -5000px;
width: 100%;
z-index: -1;        
}

HTML:

<table>
<col /><col /><col />
<tr>
<th class="col">First Name</th>
<th class="col">Middle Name</th>
<th class="col">Last Name</th>
</tr>
<tr>
<td>Peter</td>
<td>Jeffery</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Marie</td>
<td>Griffin</td>
</tr>
<tr>
<td>Margie</td>
<td>Ann</td>
<td>Thatcher</td>
</tr>
</table>

Script:

function firefoxFix() {
if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
var tds = document.getElementsByTagName( 'td' ),
ths = document.getElementsByTagName( 'th' );
for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
};
for( var index = 0; index < ths.length; index++ ) {
ths[index].innerHTML = 
'<div class="' + ths[index].className + '">' 
+ ths[index].innerHTML 
+ '</div>';                     
ths[index].className = '';
};
var style = '<style>'
+ 'td, th { padding: 0 !important; }' 
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );
};
};
firefoxFix();

OriginalL'auteur ThinkingStiff

Ici est une solution plus simple: définir le style suivant pour tous les table, tr et td:

border: 2px inset black;
border-collapse: collapse;
border-spacing: 0;

Faire border inset fait le tour. inset est utile:

Lorsque les deux parents et l'enfant des éléments de frontières, avec cette technique, vous n'obtenez pas deux frontières (ce qui est laid). C'est parce que les éléments enfants sont rendus sur boîtier encastré ombres, pas à l'intérieur de boîtier encastré ombres.

Référence: http://makandracards.com/makandra/12019-css-emulate-borders-with-inset-box-shadows

De travail exemples: http://jsfiddle.net/TR8Zg/146/

Il fonctionne bien sur Chrome. Mais sur IE et FireFox l'insert d'effet est rempli. Donc besoin de trouver des correctifs sur eux.

OriginalL'auteur Joy