Comment positionner mon entête CSS

Version imprimable

1 pièce(s) jointe(s)

Bonjour

J'ai un soucis avec l'entête mon tableau, je n'arrive pas à la positionner comme je souhaite :(

Je suis débutante dans le développement.:oops:

voici la partie du code qui pour moi pose problème :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <table class="table table-striped" style="background-color:#e7efd1 " id="@domain_libelle-tabela"> <tr style=" font-weight:bold; color:white; background-color: #54734C;height:3px;font-family:Arial;font-size:20px;text-align:center; "> <th style="text-align:center;max-width:10%">N°</th> <th style="text-align:center;max-width:70%">Contenu</th> <th style="text-align:center;max-width:20%">Conformite</th> </tr> <tr> <TD style="max-width:10px">@texte_num</TD> <TD style="max-width:70px">Texte complet</TD> <TD style="max-width:20px">
je souhaite que mon entête prenne toute la largeur de mon tableau//que seul l'espace de mes données nécessaire soit utilisé dans mon tableau pour chaque élément //la j'ai trop d'espace vide//et qu'il n'y est pas d'espacement entre les deux élément entête et mon domaine, je m'explique
l'élément produits pharmaceutique c'est un domaine et j'en ai 15 qui s'ouvre en accordéon et donc à l'intérieur de ces domaine j'ai pour chaque mon entête qui contient N° Contenu Conformité

A savoir que cela s'ouvre en accordéon ;)
voici le plan :?

file:///C:/Users/a.agnel/Desktop/Betty/Doc1.pdf
A bientôt

24/10/2019, 12h19
darkstar123456

Bonjour,

Je pense que je ne serai pas le seul donc je vais juste dire que j'ai absolument rien compris.... et le pire c'est que la capture d'écran, au lieu d'aider, ne fait qu'empirer cette incompréhension :|
24/10/2019, 13h08
BBlanhard

mon problème avec mon entête de tableau

Je m'excuse je m'en doutais un peu...
Je sais pas trop comment expliquais puisque je n'y connais pas grand chose. J'ai modifier certaines choses, espérant être plus explicite....:oops:
bonne journée et merci d'avoir pris le temps de me répondre
:oops::oops::oops::oops::oops::oops::oops::oops::oops::oops::oops::oops:

A bientôt
24/10/2019, 13h20
darkstar123456

Noooon n'abandonne pas !

Si tu n'arrives pas à écrire ton problème, essaye peut-être plutôt de dessiner ce à quoi tu voudrais arriver :)

On a vu sur ta capture d'écran ce à quoi ça ressemble actuellement. Essaye de faire un petit schéma pour montrer ce que tu souhaiterais avoir.
Si tu trouves qu'avec une seule image finale, ce n'est pas clair, n'hésite pas à faire plusieurs schémas avec des étapes intermédiaires en décrivant un peu chaque étape.

Par exemple, si on a une animation au click qui va de gauche à droite tu fais 3 images :
- image 1 : état de départ - Tu indiques également où se fait le click
- image 2 : état intermédiaire - tu peux ajouter des flèches pour montrer encore plus que ça part à droite par exemple
- image 3 : état final

2 pièce(s) jointe(s)

avec schéma et plus

Code:

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
             <h4 style="font-weight:bold;color:#559035;background-color:#CBD9AD;">@domain_libelle</h4>
            }
 
           <table class="table table-striped" style="background-color:#e7efd1 " id="@domain_libelle-tabela">
 
           <tr style=" font-weight:bold; color:white; background-color: #54734C;height:3px;font-family:Arial;font-size:20px;text-align:center; margin: 0px;  width:1075px; border: 1px solid black; right:30px;">
 
                <th style="text-align:center;max-width:10px">N°</th>
                <th style="text-align:center;max-width:70%">Contenu</th>
                <th style="text-align:center;max-width:20px">Conformite</th>
            </tr>
          <!-- Déclaration variables- (chemin empreinté) recherche de la valeur Texte-ID dans la BD entiere// chaque ligne de chaque colonne-->
            @{
                var texte = Veille_Reglemaintere_Env.Models.Textes_Esqua.Textes_Manager.getTextebyId(item.Value.Texte_ID);
 
              <!-- Affiche les 2 variables recherchées// pas besoin d'écrire, il est propose </!-->
 
                var texte_num = texte.Texte_Thematiques + "-" + texte.Fiche_Synthese_Numero;
            }
        <!--Affiche pour l'utilisateur les valeurs demandées/corps du tableau-->
            <tr>
                <TD style="max-width:10px">@texte_num</TD>
                <TD style="max-width:70px">Texte complet</TD>
                <TD style="max-width:20px">
 
                    @Veille_Reglemaintere_Env.Models.Gestion_arborescences.Process_Manager.Instance.get_Process_with_ID(item.Value.Process_ID_Ref)
 
                  <!-- Déclaration de mes variables qui garde toujours la même orthographie pour être retrouvées// dans la colonne Conformite //ligne par ligne-->
                    @{
                        string Nom_conformite = "";
                        if (item.Value.Conformite == "C")
                        {
                            Nom_conformite = "Conforme";
                        }
                        else if (item.Value.Conformite == "NC")
                        {
                            Nom_conformite = "Non Conforme";
                        }
                        else if (item.Value.Conformite == "R")
                        {
                            Nom_conformite = "Remarque";
                        }
                        else if (item.Value.Conformite == "AE")
                        {
                            Nom_conformite = "A évaluer";
                        }
                        else if (item.Value.Conformite == "NCS")
                        {
                            Nom_conformite = "Non_Conformite_Significative";
                        }
                        else if (item.Value.Conformite == "")
                        {
                            Nom_conformite = "";
                        }
                    }
                    @Nom_conformite
                    <br>
 
                  <!--Déclaration de ma variable DataTime// peut s'afficher brut sans modification dons pas besoin de fonction
                           // elle s’écrit puis se déclare en dessous systématiquement-->
 
                    @{
                        var DataTime = item.Value.Date_Debut.Date.ToString("dd/MM/yyyy");
                    }
                    @DataTime
                    <br>
                   <!--Identiquement à la variable DataTime-->
                    @{
                        HtmlString Commentaire = new HtmlString(item.Value.Commentaire);}@Commentaire
                        <br>
                    </TD>
                </tr>
                </table>
                domaines.Add(domain_libelle);
            }
        }
</div>
 @}

Pièce jointe 512876

24/10/2019, 14h11
darkstar123456

Si tu pouvais éditer ton message en entourant tout ton code par les balises [ code ] [ /code ] (sans les espaces) ça nous permettrait de mieux lire le code et d'être sûr que rien ne s'est perdu lors de l'affichage ^^
24/10/2019, 14h16
BBlanhard

darkstar123456 merci ;););)
24/10/2019, 14h23
darkstar123456
http://tests.pierre-roels.com/tables.php

Est-ce bien cela à quoi tu veux arriver en gros ?
Ce qui t'embête c'est que la largeur de ta colonne "Contenu" est trop large (width trop grand) par rapport à son contenu ?

Ou est-ce plutôt ceci : http://tests.pierre-roels.com/tables.php?w-auto=1

Je vois qu'en plus, tu connais la largeur en px de chaque colonne, tu peux donc tout simplement le définir :)
Le plus simple est de le faire pour les headings (th) comme tu l'as fait.
Cependant, ta <table> est en width: 100% (c'est dans la définition de la classe .table), il faut donc mettre width: auto; (voir mon second lien)

Dans mon second lien, j'ajoute la classe .table-w-auto (donc, pour toi : <table class="table table-striped table-w-auto" style="background-color:#e7efd1 " id="@domain_libelle-tabela">, que je défini comme ceci dans mon code :
Code:

1 2 3 4 5 <style> .table-w-auto { width: auto; } </style>
24/10/2019, 15h04
BBlanhard

1 pièce(s) jointe(s)

re :salut: :zoubi:

Déjà merci pour ton temps

Alors ce qui m'embête c'est que malgré mes width définis dans mes th rien ne se dimensionne comme je le souhaite
j'ai un espace sur le coté gauche /beurk

et même si je mets d'autre dimension cela ne bouge pas ça reste figé comme ça :roll:
Aussi j'ai mis le code que tu m'as proposé et regarde le résultat en copie d'écran
Euh!! là c'est du lourd :oops:
:alerte: :rose:
:pc:Pièce jointe 512887
24/10/2019, 15h14
darkstar123456

Justement, le résultat que tu obtiens est normal :)

Tout vient du fameux width 100% ou auto.

En 100%, t'auras beau danser sur ta tête, la table va faire 100% de la largeur et donc si tu défini toutes les largeurs il va juste se dire que c'est une erreur et ne respecter aucune largeur (vu que le 100% va l'emporter).
Tu peux tester en ne définissant la largeur que d'une colonne ou deux (mais pas toutes) et là, tes largeurs définies vont être respectées.

Et quand je disais que ton second résultat est normal, c'est tout simplement parce qu'en width: auto; sur la <table>, tes largeurs vont être respectées.... sauf qu'elles sont trop petites pour ton contenu.
Donc c'est tout écrasé (aussi, tu n'a pas de padding sur tes cellules, ce qui donne encore plus cette impression d'écrasement)
24/10/2019, 15h49
BBlanhard

problème résolu

Merci beaucoup

tout est bon

Je n'y serai pas arrivé seule, :bug:

:arf:

:merci:
24/10/2019, 15h51
darkstar123456

De rien :-)
24/10/2019, 16h16
BBlanhard

En parallèle

darkstar123456

Excuses moi mais par contre concernant l'espace vide de mes cellules aurais tu un petit tuyau svp:idea:
24/10/2019, 16h54
darkstar123456

Hmm espace vertical ou horizontal ?
Une fois de plus, je pense qu'une petite image serait d'une grande aide :) (ou alors, voir le site carrément, c'est encore mieux ;-))
24/10/2019, 17h08
BBlanhard

1 pièce(s) jointe(s)

re

oui c'est certain voir le site je n'ai pas trop le droit je suis en stage alors on ne m'autorise pas tout :calim2:
par contre sur l'image de tout à l'heure j'ai démontré cette espace inutile vertical ... car les données sont de différentes tailles selon les lois et donc je souhaite que l'espace soit approprié pour chaque cellule
je te montre :oops:
aussi j'ai l'espace en au dessus de l'entête qui doit disparaître afin que l'entête soit collé en dessous de la cellule du domaine
C'est l'espace inutilement exploité que j'ai caractérisé en rouge

merci encorePièce jointe 512935
25/10/2019, 08h09
darkstar123456

Hmmm ça va être difficile de répondre comme ça...
C'est purement des problèmes de CSS mais vu que tu fais une partie des styles de façon "inline" (c'est pas une bonne habitude d'ailleurs :p), j'imagine qu'il y a en plus des feuilles CSS qui interviennent également.

J'imagine que pour le problème du domaine, il doit y avoir du margin et/ou du padding dessus, voire peut-être même diminuer le line-height.

Pour l'espace "inutilement exploité", ce n'est clairement pas un comportement de base, donc ça veut dire que quelque part, il est écrit que ça doit être aussi haut.
Par contre, on a pas cette info dans le code que tu as partagé :/
25/10/2019, 08h42
Invité
Bonjour,

1- respecter la syntaxe des <table> :
- Les tableaux (XHTML & CSS)
Voir notamment :
- <thead>, <tbody>
- <colgroup>, <col> pour définir les largeurs
Les largeurs se définissent avec width, en % ou en px (PAS avec max-width)