2010-01-04 5 views
3

Il suffit de faire quelque chose le long des lignes decache TR - Bordures être inclus

$("tr.myclass").hide(); 

cacheront les lignes concernées. Cependant, si j'ai une bordure contre le td contenu dans ce tr, alors ils montrent encore après que le tr a été caché. Par conséquent, la table d'origine a une bordure 1px sur le bas des éléments td. L'endroit où les ensembles de rangées sont cachés fait apparaître une bordure de deux pixels. Je suppose que c'est parce que le tr est caché et pas le td, donc la frontière existe toujours. Cependant, cela ne devrait pas avoir d'importance, tout ce qui est contenu dans le TR devrait être caché.

Je suis un peu perdu sur celui-ci comme personne sur les interwebs ne semble l'avoir rencontré, au moins, pas par mes critères de recherche.

Des idées?

EDIT

Ok, essayez tout en utilisant <col /> et <colgroup></colgroup>, vous trouverez qu'il est reproductible. Mon collègue m'a dit de me débarrasser du col et des colgroups et hop, ça marche bien. C'était dans IE8 (je ne suis pas un utilisateur IE, mais c'est pour un projet IE seulement). Très étrange.

+0

Pouvez-vous poster un exemple de balisage HTML? – rahul

+0

Lorsqu'un élément parent est masqué, tous les éléments enfants sont également masqués. – rahul

+0

@pulse: en effet, c'est l'effet désiré, et j'ai supposé que c'était vrai jusqu'à maintenant. – Kezzer

Répondre

3

La bordure n'appartient pas aux cellules, elle appartient plutôt à la table et est affichée entre les cellules. Masquer la ligne cachera les cellules mais ne les supprimera pas, donc la frontière entre les cellules est toujours là.

Les tableaux ne sont pas destinés à être utilisés de cette façon, si vous masquez des parties d'une table, il se comportera de façon erratique ou inattendue. La structure de la table ne change pas lorsque vous masquez des éléments, donc la table ne s'affichera pas comme si les éléments cachés n'existaient pas. Si vous souhaitez supprimer des lignes de table de la table, vous devez supprimer les éléments tr de la table.

2

J'ai essayé de reproduire ce avec le code suivant:

<html> 
<style> 
td { border: 1px solid black; } 
</style> 
<body> 
<table> 
    <tr id="row1"><td>Row 1</td></tr> 
    <tr id="row2"><td>Row 2</td></tr> 
    <tr id="row3"><td>Row 3</td></tr> 
</table> 
<p>Hide row 2</p> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
$(function(){ 
    $('p').click(function(){$('#row2').hide();}); 
}); 
</script> 
</body> 
</html> 

Les frontières sont cachés ainsi que le contenu de l'élément td.

+0

Vous cachez toutes les lignes, pas un sous-ensemble d'entre elles. Si je cache toutes les lignes, c'est bien. – Kezzer

+0

J'ai ajouté plus de lignes et n'en ai caché qu'une seule - les bordures sont toujours cachées avec le contenu des lignes. –

+0

Vérifiez mon édition, j'ai découvert pourquoi. – Kezzer

0

J'ai rencontré un problème similaire. En se cachant, ou même en supprimant un tr, la bordure gauche de l'en-tête de la table est «lâchée» vers le tds ci-dessous.