Problem with the background color of the

Question

I have made a table where I display data that is structuredThe problem is that I insert a background color but this does it for all sections. The problem is that I would like to be able to display the three characteristics as this image shows. THE PROJECT

But I get this: MY RESULT

HTML CODE:

<?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= '20230104' 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 );
            ?>
            <table>
            <?php
                while( $row = odbc_fetch_array( $results ) )
                {
                    printf('<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>'; 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'; 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/table.png" id="TABLE"></img></span>&nbsp</br>'; break;
                    }
                    printf('<td>%s</td>',$row["enc_cmd_num"]);
                    printf('<td>%s</td>',$etat_cmd);
                    printf('<td>%s</td>',$commande);
               
                }
            ?>
            </table>
 
    </body>
</html>

CSS CODE:

/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap');
 
 
 
.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-size: 30px;
    font-weight: bold;
    color: #11C306;
    font-family: 'Montserrat';
}
 
#time{
    color: white;
    font-family: 'Montserrat';
    font-size: 25px;
    font-weight: bold;
}
 
 
 
table{
    float: left;
}
 
tr{
    color: red;
    font-size: 25px;
    font-family: 'Montserrat';
    font-weight: bold;
}
 
.SURPLACE{
    color: red;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 25px;
}
 
#TABLE{
width : 100px;
height : 70px;
}
 
td{
    background-color: #181818;
    border-radius: 13px;
}
 
#EMP{
width : 70px;
height : 70px;
}
 
#LIV{
width : 70px;
height : 70px;
}

Answer 1

If you add this to your CSS it should remove all spacing between the cells

tr,
th,
td {
    padding: 0;
    border-spacing: 0;
}