Comment puis-je supprimer la bordure du tableau lors de l'impression en utilisant css @media print ?

Question

Comment puis-je supprimer la bordure du tableau lors de l'impression en utilisant css @media print ?

Demandé el 6 de Janvier, 2017: Quand la question a-t-elle été
2909 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Bonjour, j'ai essayé de supprimer la bordure de mon tableau lorsque l'utilisateur clique sur le bouton d'impression (window.print) en utilisant le css mais il reste toujours dans la page imprimée.

Voici mon code css :

    @media print{

    body * {visibility: hidden;

    }

    table {
        border:solid; white !important;
        border-width:1px 0 0 1px !important;
        border-bottom-style: none;
    }
    th, td{
        border:solid; white !important;
        border-width:0 1px 1px 0 !important;
        border-bottom-style: none;
    }
}

ce css m'a donné ce résultat :

La bordure inférieure du tableau reste visible. Comment puis-je la supprimer ?

Demandé el 6 de Janvier, 2017 par Errabi Ayoub

Answer 1

2 Réponses

Answer 2

5voto

GibboK Points 9196

Vous pouvez l'utiliser dans votre règle CSS3 @media :

border-bottom: none;

o

border: solid white !important;

Utilisation de border-bottom: none; pourrait affecter la mise en page de votre tableau lors de l'impression (selon que vous utilisez box-sizing avec une valeur par défaut ou non).

Voici un exemple :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        table {
            /* just an example */
            border: solid red;
            border-width: 1px 0 0 1px !important;
            border-bottom-style: none;
        }

        @media print {

            table {
                border: solid white !important;
                border-width: 1px 0 0 1px !important;
                border-bottom-style: none;
            }

            th, td {
                border: solid white !important;
                border-width: 0 1px 1px 0 !important;
                border-bottom-style: none;
            }
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>
</body>
</html>

Répondu el 6 de Janvier, 2017 par GibboK (9196 Points )

Answer 3

2voto

Errabi Ayoub Points 1814

Enfin, cette solution a fonctionné pour moi :

@media print {

    * {
        color: #000;    
        background-color: #fff;
        @include box-shadow(none);
        @include text-shadow(none);
    }
}

Répondu el 10 de Janvier, 2017 par Errabi Ayoub (1814 Points )

Comment puis-je supprimer la bordure du tableau lors de l'impression en utilisant css @media print ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment puis-je supprimer la bordure du tableau lors de l'impression en utilisant css @media print ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: