表格背景色仅局部生效及间距过小问题求助

我正在开发一个项目，需要生成包含编号、状态、图片的三列表格。目前三个元素可正常显示，但添加CSS背景色时，背景仅作用于单元格而非整行，且单元格间距极小。以下是当前效果截图：

当前HTML代码 #

<!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/commandes.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: "BaseDeDonnées.php",
            dataType: "json",
            error: function(error){
            console.log(error)
            },
            success: function (response) {
                  console.log(response);
                var data = response;
                let html = "";
                html += '<table>';
                
                data.forEach(element => {
                    
                    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_type']) {
                        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/livreurscoot.png" id="LIV"></span>';
                            break;
                        case '2':
                            commande = '<span class="SURPLACE">&nbsp&nbsp&nbsp<img src="img/resto.png" id="TABLE"></span>';
                            break;
                    }
                    html += '<tr>';
                    html += '<td>' + num_cmd + '</td>';
                    html += '<td>' + etat_cmd + '</td>';
                    html += '<td>' + commande + '</td>';
                    html += '</tr>';
                })

                html += '</table>';
                document.getElementById('AffichageCommandes').innerHTML = html;
            }
        });
    }, 1000);
});


    </script>

</head>

<body>
    <div id="AffichageCommandes"></div>
</body>
</html>

当前CSS代码 #

#TABLE{
max-width: 25%;
}

#EMP{
max-width: 25%;

}

#LIV{
max-width: 25%;
}

.ENPREPA{
    font-size: 35px;
    color: #FF8C01;
    font-family: Arial;
    font-weight: bold;
}

.PRETE{
    font-size: 33px;
    color:#05750D;
    font-family: Arial;
    font-weight: bold;
    animation-duration: .6s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;

}

.ATTENTE{
    font-size: 33px;
    color: red;
    font-family: Arial;
    font-weight: bold;

}

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


.TABLELEFT{
    font-size: 35px;
    column-count: 2;
    text-align: center;
    color: red;
    font-family: Arial;
    font-weight: bold;
    margin-left: 50px;


}


table td , table tr{
    width: 15%;
    background-color: #212121;
    border-radius: 13px;
}

1. 修复整行背景色问题 #

当前CSS同时给tr和td设置了背景色，td的背景会覆盖tr的，导致整行背景不连贯。只需给tr设置背景色，移除td的背景色属性即可。

2. 调整单元格间距 #

通过border-spacing设置单元格之间的距离，同时确保表格的border-collapse设为separate（默认值，若之前设为collapse需改回）。

3. 修正HTML结构错误 #

原代码中<div class="TABLELEFT">放在了<head>标签内，不符合HTML规范，需移到<body>中包裹目标容器。

修改后的关键代码 #

CSS部分

table {
    border-collapse: separate;
    border-spacing: 10px; /* 单元格间距，可按需调整 */
    width: 100%; /* 让表格占满容器宽度 */
}

table tr {
    background-color: #212121;
    border-radius: 13px;
}

table td {
    width: 15%;
    padding: 12px; /* 增加单元格内边距，避免内容贴边 */
    text-align: center; /* 让内容居中对齐 */
}

HTML结构调整

<body>
    <div class="TABLELEFT">
        <div id="AffichageCommandes"></div>
    </div>
</body>

内容的提问来源于stack exchange，提问作者Daniel Agra