Forums Tout JavaScript

Bonjour,

Comment obtenir le fond jaune correctement centré pour 3 colonnes utilisant un colSpan=3 ? Erreur codage Javascript ou CSS ?

Note : Les instructions CSS3 (border-collapse: collapse; ou empty-cells: hide;) sont sans effet.

Voici le code simplifié regroupant CSS3 et Javascript.

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Test Array HTML et DOM avec colSpan</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="css/index_styles.css" />
        <style>
            #Tableau2 {
                position: relative;
                margin-top: 9em;
                margin-left: auto;
                margin-right: auto;
                width: 58vw;
                height: 15vw;
                border: #0000bb 1px solid;
                /* ****************************************** */
                /* Neutraliser ou non la suite ne change rien */
                /*   sur l'action de colSpan pour le Libellé  */
                /* ****************************************** */
                background-color: #bfddff;
                border-spacing: 20px;
                border-radius: 10px;
                box-shadow: 5px 5px 5px #777;
                /* ****************************************** */
            }

            th {
                font-weight: normal;
                font-family: Times New Roman, Times, serif;
                font-size: 1.4vw;
            }

            td {
                /* ****************************************** */
                /*      Code CSS sans effet (HTML ou DOM)     */
                /*   sur l'action de colSpan pour le Libellé  */
                /* ****************************************** */
                border-collapse: collapse;
                empty-cells: hide;
                /* ****************************************** */
                font-family: Times New Roman, Times, serif;
                font-size: 2vw;
            }

            .Titre {
                width: 100%;
                text-align: center;
                font-weight: bold;
                color: red;
                background-color: #ffffcc; /* Jaune */
            }

            #Col1 {
                width: 30%;
            }

            #Version {
                width: 30%;
                color: red;
                background-color: #ffffcc; /* Jaune */
            }

            #Col3 {
                width: 30%;
            }
        </style>
    </head>
    <body>
        <div id="Tableau2"><div>
        <script>
		
            Tableau();

            function Tableau() {
                // var body = document.getElementsByTagName("body")[0];
                table = document.createElement("table");
                tablebody = document.createElement("tbody");

                for (var i = 0; i < 2; i++) {
                    row = document.createElement("tr");
                    // Créer les colonnes souhaitées
                    for (var j = 0; j < 3; j++) {
                        if (i == 0) {
                            cell = document.createElement("td");
                            text = document.createTextNode("");
                            cell.appendChild(text);
                            row.appendChild(cell);
                            if (j == 0) {
                                cell.className = "Titre";
                                cell.colSpan = 3;
                                cell.innerHTML = "<<== cell.colScan=3 Colonnes (Centrage Nok) ==>>";
                            }
                        }
                        if (i > 0) {
                            cell = document.createElement("th");
                            text = document.createTextNode("");
                            cell.appendChild(text);
                            row.appendChild(cell);
                            if (j == 0) {
                                if (i == 1) {
                                    cell.id = "Col1";
                                    cell.innerHTML = "Contenu Col1";
                                }
                            }
                            if (j == 1) {
                                if (i == 1) {
                                    cell.id = "Version";
                                    cell.innerHTML = "Version 12/09/2022";
                                }
                            }

                            if (j == 2) {
                                if (i == 1) {
                                    cell.id = "Col2";
                                    cell.innerHTML = "Contenu Col2";
                                }
                            }
                        }
                    }
                    tablebody.appendChild(row);
                }
                table.appendChild(tablebody);
                // body.appendChild(table);
                document.getElementById("Tableau2").appendChild(table);
            }
        </script>
    </body>
</html>

Le fichier :

Array_DOM.zip: (1.26 Kio) Téléchargé 626 fois

Merci par avance.

PS : J'ai oublié de préciser qu'un codage du tableau avec un id direct sur table (sans le placer dans un DIV) donne un résultat similaire ... en pire si on laisse border-spacing: 20px; en CSS #Tableau2 (Fichier 001.PNG) !

Code : Tout sélectionner

function Tableau() {
    var body = document.getElementsByTagName("body")[0];
        ..... 
    table.appendChild(tablebody);
	table.id = id="Tableau2";
    body.appendChild(table);
}

Solution donnée par une collégue (Merci Catherine !) qui avait rencontré ce dysfonctionnement lors d'une conversion de tableaux HTML vers DOM...

Ajouter un padding-left: dans #Tableau2...

Effectivement cela fonctionne.

Sujet clos .

Forums Tout JavaScript

Réécriture Array html en Dom avec présence colSpan=3

Réécriture Array html en Dom avec présence colSpan=3

Re: Réécriture Array html en Dom avec présence colSpan=3