Couleur de background dans une TABLE

**SHEYPT** · 10/02/2023, 11h38

Bonjour à tous
J'ai réalisé un projet qui est d'afficher des commandes qui proviennent directement d'une base de donnée

J'arrive donc en effet à pouvoir afficher les commandes sans problème avec le numéro , le statut ainsi qu'une image la représentant

Mon objectif dès a présent est de pouvoir instaurer un fond de couleur sur toutes les commandes séparément en ne faisant pas un gros bloc de couleurs.

J'ai donc utilisé un tableau pour afficher les commandes mais lorsque j'instaure un background color , rien ne s'affiche

Voici mon résultat :
Nom : image.png
Affichages : 83
Taille : 381,3 Ko

Nom : image.png
Affichages : 83
Taille : 381,3 Ko

Ce que je souhaite réalisé :
Nom : 1.PNG
Affichages : 70
Taille : 18,2 Ko

Voici mon codes html et css :

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/NumeroDeCommande.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <div class="TABLELEFT">
 
        <script type="text/javascript">
        $(document).ready(function () {
            setInterval(function () {
        $.ajax({
            type: "POST",
            url: "BaseCommandes.php",
            dataType: "json",
            error: function(error){
            console.log(error)
            },
            success: function (response) {
                  console.log(response);
                var data = response;
                let html = "";
                data.forEach(element => {
                    html += "<tr>";
                    let etat_cmd;
                    let commande;
                    let num_cmd;
 
                    if (element['enc_ext_ref'] != null) {
                        num_cmd = element["enc_ext_ref"];
                    }
                    else {
                        num_cmd = element["enc_cmd_num"];
                    }
 
                    if (element['enc_paye'] == 0) {
                        etat_cmd = '<span class="ATTENTE">ATTENTE REGLEMENT</span>';
                    } else {
                        switch (element['enc_prepared']) {
                            case '0':
                                etat_cmd = '<span class="ENPREPA">EN PREPARATION</span>';
                                break;
                            case '1':
                                etat_cmd = '<span class="PRETE">COMMANDE PRETE</span>';
                                break;
                        }
                    }
 
                    switch (element['enc_prepared']) {
                        case '0':
                            commande = '<span class="EMPORTER">&nbsp&nbsp&nbsp<img src="img/nourriture.png" id="EMP"></span>';
                            break;
                        case '1':
                            commande = '<span class="LIVRAISON">&nbsp&nbsp&nbsp<img src="img/livreur.png" id="LIV"></span>';
                            break;
                        case '2':
                            commande = '<span class="SURPLACE">&nbsp&nbsp&nbsp<img src="img/resto.png" id="TABLE"></span>';
                            break;
                    }
 
                    html += "<td>" + num_cmd + etat_cmd + commande + "</td><br>"
                })
 
                document.getElementById('AffichageCommandes').innerHTML = html;
            }
        });
    }, 1000);
});
    </script>
</table>
 
</head>
<body>
    <div id="AffichageCommandes"></div>

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
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
79
/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap');
 
.ENPREPA{
	color: #FF8C01;
	font-family: 'Montserrat';
	margin-left: 50px;
	font-size: 35px;
}
 
.PRETE{
	color:#05750D;
	font-size: 35px;
	font-family: 'Montserrat';
	margin-left: 50px;
	animation-duration: .6s;
  	animation-name: clignoter;
  	animation-iteration-count: infinite;
  	transition: none;
}
 
.ATTENTE{
	color: red;
	font-family: 'Montserrat';
	margin-left: 50px;
	font-size: 35px;
}
 
@keyframes clignoter {
  0%   { color:#000000; }
  40%   {color:#F1A200; }
  100% { opacity:#000000; }
}
 
.TABLELEFT{
	font-size: 35px;
	font-weight: bold;
	font-family: 'Montserrat';
	color: red;
	column-count: 2;
	margin-left: 250px;
	margin-top: 20px;
 
}
}
 
tr, th, td{
	background-color: #121212;
	border-radius: 13px;
  border-spacing: 15px 50px;
  	position: fixed;
 
 
}
 
td{
	background-color: #121212;
	border-radius: 13px;
  border-spacing: 10px 20px;
  	position: fixed;
}
 
 
 
 
#TABLE{
max-width : 10%;
height : auto;
}
 
#EMP{
max-width : 10%;
height : auto;
}
 
#LIV{
max-width : 10%;
height : auto;
}