Problème de background color avec la balise td

Sheyy -  
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   -

Bonjour à tous
Je un tableau qui affiche les données de plusieurs commandes en cours.
Elles affichent le numéro de commande , le statut et une image représentant sur place ou a emporté.

J'insère cela dans un tableau mais le problème est que celui ci sépare toutes les sections et il y a donc un espace entre chaques ce qui rend tout cela moche et n'est pas ce que je souhaite

Mon projet est celui-ci :

Mon résultat : 

Il y a en effet une séparation entre le numéro de commandes , le statut et l'image 

Mes codes sont les suivants : 

HTML et PHP

?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="10" />
    <link rel="stylesheet" type="text/css" href="css/commandess.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined%3Aopsz%2Cwght%2CFILL%2CGRAD%4048%2C400%2C0%2C0" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined%3Aopsz%2Cwght%2CFILL%2CGRAD%4048%2C700%2C1%2C200" />
</head>
<body>
        <?php
                $sql = "SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_type, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= '20230112' AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC";

                $results = odbc_exec( $conn, $sql );
        ?>

<div class="TABLELEFT">
        <table>
            <?php
                while( $row = odbc_fetch_array( $results ) )
                {
                    printf('&nbsp<tr>');

                    if ( $row["enc_ext_ref"] != '')
                        {
                            $num_cmd = $row["enc_ext_ref"];
                        }
                    else
                        {
                            $num_cmd =$row["enc_cmd_num"];
                        }


                    if ($row['enc_paye'] = 0)
                    {
                        $etat_cmd='<span class="PRETE">&nbsp&nbsp&nbsp&nbsp&nbspATTENTE REGLEMENT&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></br>';
                    }
                    else
                    {
                        switch( $row['enc_prepared'] )
                        {
                            case 0: $etat_cmd='<span class="ENPREPA">&nbsp&nbsp&nbsp&nbsp&nbspEN PREPARATION&nbsp&nbsp&nbsp</span></br>'; break;

                            case 1: $etat_cmd='<span class="PRETE">&nbsp&nbsp&nbsp&nbsp&nbspCOMMANDE PRETE&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></br>'; break;
                        }
                    }

                    switch( $row['enc_type'] )
                    {
                        case 0: $commande='<span class="EMPORTER">&nbsp&nbsp<img src="img/emporter.png" id="EMP"></img></span>&nbsp</br>'; break;

                        case 1: $commande='<span class="LIVRAISON">&nbsp&nbsp<img src="img/livreur.png" id="LIV"></img></span>&nbsp<br>'; break;

                        case 2: $commande='<span class="SURPLACE">&nbsp&nbsp<img src="img/table1.png" id="TABLE"></img></span>&nbsp<br>'; break;
                    }

                    printf('<td>%s</td>',$row["enc_cmd_num"],$etat_cmd);

                    printf('<td>%s</td>',$etat_cmd);
                    printf('<td>%s</td>',$commande);
                
                }

            ?>
            </table>
        </div>
   </body>
</html>

LE CSS : 

#TABLE{
width : 100px;
height : 70px;
color: pink;
}

#EMP{
width : 70px;
height : 70px;
}

#LIV{
width : 70px;
height : 70px;
}

table tr {
border: none;
transition: all 1s ease-in-out;
}
 table tr.slide-out {
transform: translateX(100%);
}


tr{
	border-radius: 13px
}

tr,th,td{
 	padding: 0;
 	border-spacing: 0;
 		background-color: #181818;

 }



.ENPREPA{
	font-size: 30px;
	font-weight: bold;
	font-family: 'Montserrat';
	color: #FF8C01;
}

.PRETE{
	font-size: 30px;
	font-weight: bold;
	font-family: 'Montserrat';
	color:#05750D;
	animation-duration: .8s;
  	animation-name: clignoter;
  	animation-iteration-count: infinite;
  	transition: none;
}

@keyframes clignoter {
  0%   { color:#000000; }
  40%   {color:#F1A200; }
  100% { opacity:#000000; }
}


li{
  color: #EB0000;
  font-family: 'Montserrat';
  font-weight: bold;
  font-size: 30px;
  text-align: left;
  list-style-type: none;
  margin-left: 20px;


}


.ATTENTE{
	font-size: 30px;
	font-weight: bold;
	color: red;
	font-family: 'Montserrat';

}

.PAYE{
font-family: 'Montserrat';
font-weight: bold;
color: #11C306;
font-family: 'Montserrat';
}

table{
color: red;
font-family: 'Montserrat';
font-size: 30px;
margin-left: 50px;
font-weight: bold;
}

.TABLELEFT{
	float: left;
}


Windows / Chrome 108.0.0.0

A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 758
 

Bonjour,

Renseignes toi sur la propriété css

border-collapse: collapse;
0

Discussions similaires

ColorSpace
mahilet -
mahilet -

3 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Balise </br>
erf -
erf -

3 réponses