Salut !!

D'avance désolé si je ne suis pas dans le bon forum !

Je cherche un moyen de cleaner mon HTML et mon CSS pour avoir un rendu correct pour une impression sans avoir d'éléments inutile en sortie !!

Voici un exemple de ce que j'ai sur l'écran !

Nom : devis.PNG Affichages : 134 Taille : 20,0 Ko

son code :

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<body>
    <section>
        <div>
            <div class="mb-8 flex flex-col justify-between p-20">
                <div>
                    <h2 class="text-3xl font-bold mb-6 pb-2 tracking-wider uppercase">Devis</h2>
                    <div class="mb-1 flex items-center">
                        <label class="w-32 text-gray-800 block font-bold text-xs uppercase tracking-wide">Devis No.</label>
                        <span class="mr-4 inline-block">:</span>
                        <div>547354354</div>
                    </div>
                    <div class="mb-1 flex items-center">
                        <label class="w-32 text-gray-800 block font-bold text-xs uppercase tracking-wide">Date du devis</label>
                        <span class="mr-4 inline-block">:</span>
                        <div>09/10/2020</div>
                    </div>
                    <div class="mb-1 flex items-center">
                        <label class="w-32 text-gray-800 block font-bold text-xs uppercase tracking-wide">Date d'échéance</label>
                        <span class="mr-4 inline-block">:</span>
                        <div>10/11/2020</div>
                    </div>
                </div>
                <div class="mb-2 w-full">
                    <label class="block text-gray-700 text-xs md:text-sm xl:text-base font-semibold" for="username">Code achat</label>
                    <input type="" id="" name="" class="w-40 h-8 xl:h-10 pl-2 border border-gray-600 rounded leading-tight focus:outline-none focus:shadow-outline" required="" autofocus="">
                </div>
                <div class="w-full">
                    <table class="w-full flex flex-row flex-no-wrap sm:bg-white overflow-hidden sm:shadow-lg my-5">
                        <thead class="text-white">
                        <tr class="bg-teal-400 flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
                            <th class="px-6 py-3 h-12 bg-ppl text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">Nom du devis</th>
                            <th class="px-6 py-3 h-12 bg-ppl text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">Status</th>
                            <th class="px-6 py-3 h-12 bg-ppl text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">Client</th>
                            <th class="px-6 py-3 h-12 bg-ppl text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">Montant total</th>
                            <th class="px-6 py-3 h-12 bg-ppl text-left text-xs leading-4 font-medium text-white uppercase tracking-wider">Actions</th>
                        </tr>
                        </thead>
                        <tbody class="flex-1 sm:flex-none">
                            <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
                                <td class="px-6 sm:py-3 py-0 whitespace-no-wrap h-12">
                                    <div class="text-sm leading-5 text-gray-900">AEFDRDEF</div>
                                    <div class="text-sm leading-5 text-gray-500">Créé le 09/07/2020</div>
                                </td>
                                <td class="px-6 py-3 text-left  whitespace-no-wrap h-12">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-ppll">En attente</span>
                                </td>
                                <td class="px-6 py-3 whitespace-no-wrap h-12 text-sm leading-5 text-gray-500">Dr. Michel Bernard</td>
                                <td class="px-6 py-3 whitespace-no-wrap h-12 text-sm leading-5 text-gray-500">0 €</td>
                                <td class="px-6 py-3 whitespace-no-wrap h-12 text-left text-sm leading-5 font-medium">
                                    <a href="#" class="btn-blue px-4">Modifier</a>
                                    <a href="#" class="btn-blue px-4">Télécharger</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</body>

Quand je fais un ctrl+p j'ai une vue d'impression mais j'aimerais virer les zone rouge et changer les zone bleu (le <input> en simple <p> et le tableau en quelques chose de plus ordonnées aussi) :

Nom : devi.PNG Affichages : 134 Taille : 31,3 Ko

Je suis sur Laravel et Tailwindcss

Merci d'avance =)