Discussion :

[L'AMI Yves]

Bonjour à tous.

Je reviens avec le même sujet, bien qu'il ait été résolu, car je n'arrive pas à transposer la solution du site de test sur le site définitif : là, les tableaux fonctionnent "à peu près" comme prévu (il reste un décalage d'un ou deux pixels quand on scrolle), mais je ne comprends pas pourquoi je n'arrive pas à maîtriser les bordures : les "<caption>" font ce que je veux, les "<th>" ont des bordures, mais elles ne sont pas "collapse", et les cellules 'normales" n'ont pas de bordure.

Voici le CSS ;

Code CSS :

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
/* CSS Document pour Raspberry Ordi*/
/* L'écran est défini comme une grille de deux lignes et trois colonnes */
html {padding: 1px; background-color: white; text-align: center;
                    font-family: Verdana, sans-serif; font-size: 10pt;}
 
body {margin: 0;}
.centre {justify-content : center;}
 
/* Pour les <div> *************************************************************/                
.colonne11  {position: absolute; left: 0;   width : 37%; top:0;   height: 50%;} 
.colonne12  {position: absolute; left: 0;   width : 37%; top:50%; height: 49%;} 
.colonne21  {position: absolute; left: 37%; width : 26%; top:0  ; height: 50%;}
.colonne22  {position: absolute; left: 37%; width : 26%; top:50%; height: 49%} 
.colonne31  {position: absolute; left: 63%; width : 37%; top:0  ; height: 50%;} 
.colonne32  {position: absolute; left: 63%; width : 37%; top:50%; height: 49%;}
 
.cellule    {overflow: hidden;  margin: 0; padding: 0; text-align: center;
                    border: 1px solid black;}
 
.avec-table {overflow: auto; border-spacing: 0;}
 
/* Pour les <table> ***********************************************************/
.avec-asc   {overflow: auto; width: 100%; height: 95%; border: 1px solid black;}
 
table.Commandes td              {width: 90px !important;}
table.Commandes td[colspan='2'] {width: 190px !important;}
 
table.Action th:nth-child(1) td:nth-child(1) {width: 50px;}
table.Action th:nth-child(2) td:nth-child(2) {width: 70px;}
table.Action th:nth-child(3) td:nth-child(3) {width: 50px;}
table.Action th:nth-child(4) td:nth-child(4) {width: 40px; text-align: right;}
table.Action th:nth-child(5) td:nth-child(5) {width: 40px; text-align: right;}
table.Action th:nth-child(6) td:nth-child(6) {width: 40px; text-align: right;}
table.Action th:nth-child(7) td:nth-child(7) {width: 20px;}
table.Action th:nth-child(8) td:nth-child(8) {width: 20px;}
 
tr td th    {border-collapse: collapse; border-spacing: 0; 
                    border: 1px solid black;} 
 
.avec-asc caption {z-index: 3; position: sticky; top: 0; line-height: 24px;
                    background: #fff5ee;}
.avec-asc thead th  {z-index: 2; position: sticky; top: 24px; line-height: 25px;
                    border: 1px solid black; background: #fff5ee;}                     
.avec-asc tbody tr:first-child {z-index:2;}
 
/* Autres *********************************************************************/
iframe      {height: 500px; width: 500px}
 
.boutons    {width:50%; table-layout: fixed;}
.boutons tr td {text-align: center;}

Je peux montrer le code HTML complet s'il le faut, mais toutes les tables commencent comme celle-ci :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    <div class='colonne31  cellule avec-table'>
        <table class='commandes avec-asc'>
          <caption>Commandes</caption>
          <thead>
            <tr><th>N°</th><th>En</th><th>Cde</th><th>B.</th><th>H.</th>
                  <th>Deb</th><th>Fin</th></tr>
          </thead>
          <tbody>
              <tr>....

Merci d'avance.

AMIcalement.

[NoSmoking]

Bonjour,
l'origine de tes maux se situe dans ces lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
tr td th    {border-collapse: collapse; border-spacing: 0; 
                    border: 1px solid black;}

• les sélecteurs doivent être séparés par des virgules
• la propriété border-collapse s'applique aux éléments <table>

Ressources :

• Sélecteurs CSS
• La propriété border-collapse

sans oublier la

• Comment appliquer un style à plusieurs éléments/classes/identifiants ?

[L'AMI Yves]

Eh bien, qu'est-ce que c'était bête !

MERCI !

Et je ne suis pas prêt d'oublier de consulter tes liens.

AMIcalement.