28172 sujets

CSS et mise en forme, CSS3

[Résolu] Ne pas imprimer la première et la dernière ligne d'une table

Bonjour

J'ai un certain nombre de pages auxquelles je ne peux pas toucher en pratique.
Par contre toutes ces pages font référence au même fichier CSS
Je voudrais donc définir un style 
@media print> {
 selecteur {display:none;}
}

pour obtenir le résultat suivant: ne pas imprimer la première et la dernière ligne de la première table de chaque page.
Je n'arrive pas à définir le sélecteur correspondant.
Merci pour votre aide
Modifié par PapyJP (13 May 2015 - 16:54)
En jouant avec les pseudo-éléments :first-child et :last-child

ex: 

.conteneur table:first-child td:first-child, 
.conteneur table:first-child td:last-child { display: none;}

Modifié par juliesunset (13 May 2015 - 17:58)
Merci Julie, c'est ce que j'avais essayé de faire, mais ça me donne une page toute blanche.
Je vais réessayer...
ça irait mieux si tu nous montrais un exemple de page... Là j'y suis allé au pif, mais t'as peut-être besoin d'une sélection plus précise...
Modifié par juliesunset (13 May 2015 - 18:13)
juliesunset a écrit :
ça irait mieux si tu nous montrais un exemple de page... Là j'y suis allé au pif, mais t'as peut-être besoin d'une sélection plus précise...

Bien d'accord, mais compte tenu du contexte il faut que je fabrique un exemple de page, je ne peux pas vous donner la page réelle.
Je reviens signaler quand c'est fait.
Modifié par PapyJP (13 May 2015 - 18:58)
ok, dans ce cas-ci le ".conteneur table:first-child..." ne fonctionnera pas puisqu'il n'y a pas de conteneur englobant le tableau et qu'il n'y qu'un seul tableau dans la page.

à ce moment-là ça serait plus: 

table th:first-child, 
table th:last-child { display: none;}

ou 

table tr:first-child th, 
table tr:last-child th { display: none;}
moi je vois bien :
@media print {
tr:first-of-type, tr:last-of-type {display:none;}
}

vu que ce tableau est reduit au minimum.

aprés: thead ou tfoot en display:none sur un tableau plus élaborer serait plus judicieux
Désolé, vos proposition pourraient convenir dans le cas de l'exemple simplifié, mais ma pages réelle est plus complexe.
Je ferai demain un exemple un peu plus proche de la réalité.

Il s'agit en fait de pages "à l'ancienne" que je ne peux pas toutes modifier compte tenu de leur nombre. Je voudrais simplement ne pas imprimer la première et la dernière <tr> de la première table. Vos propositions me ferraient également masquer des <th> ou <tr> d'autres tables.
Bonjour
J'ai fait un test un peu plus complexe, qui bien entendu ne marche pas mieux.
http://paralletes.free.fr/tests/table-test2.html
Ça peut vous paraitre loufoque, mais il s'agit d'un site ancien, à une époque où, en l'absence d'un CSS assez riche, la seule façon de mettre les informations sur une page consistait à tout mettre dans des tables. Ce serait trop de travail de tout reprendre et remplacer par d'autres balises... dont la plupart seraient du reste en 
display: table-quelquechose
OK! J'avais un petite doute que tes tableaux étaient beaucoup plus complexes!

Donc on s'en va dans une sélection VRAIMENT plus précise.

Et après plusieurs essaie en utilisant la coloration voici à quoi je suis arrivé!

body table:first-of-type tr:first-of-type table tr:nth-child(2) th,
body table:first-of-type tr:last-of-type table tr:nth-child(2) th{
  display: none;
}

ou

body table:first-of-type tr:first-child table tr:nth-child(2) th,
body table:first-of-type tr:last-child table tr:nth-child(2) th{
  display: none;
}


EDIT: voici comment j'ai procédé: http://codepen.io/anon/pen/eNZjRa
Modifié par juliesunset (14 May 2015 - 17:41)
Merci Julie
Dans le genre complexe de chez complexe, on fait difficilement plus complexe Smiley cligne
Je vais essayer de mettre ça en œuvre, je vous tiendrai au courant des essais.
Finalement, n'étant pas parvenu à traiter le problème comme je le voulais, j'ai utilisé le fait qu'il y a une fonction JavaScript appelée en fin de page pour styler les balises tr, avec un "@media print" approprié.

    var pageRows = document.getElementsByTagName('tr'), headerRow = pageRows[0];
    headerRow.id = 'pageHeaderRow';
    var footerRow = pageRows[pageRows.length - 1];
    footerRow.id = 'pageFooterRow';



    @media print {
        #pageHeaderRow, #pageFooterRow {display:none;}
    }

C'est sans doute moins "élégant", mais plus simple à faire, et au moins je comprends ce que je fais et comment ça marche.
Sujet clos
Aller à