Discussion :

[Zebulon777]

Bonjour à tous.



Dans ce tableau, je voudrai arriver à avoir des cases carrées et donc que le texte, si besoin, soit tronqué.
J'ai essayé pas mal de chose, mais sur l'image, c'est le mieux que j'arrive à faire ; on voit bien que certaines cases, qui contiennent un texte trop important, ont une hauteur trop grande et que d'autres ont une hauteur trop petite.

Voici mon code et mon CSS :

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
 
.Div-Synthese {
    background-color:transparent;
}
 
table.table-Synthese {
	font-family: arial;
	font-size: 11px;
/*    font-weight: bold;*/
/*    table-layout:fixed;*/
}
table.table-Synthese tr td {
    max-width: 120px;
    max-height: 50px;
/*    height:25px;*/
/*    padding-top:15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;*/
/*    magin: 0 auto;*/
    word-break:break-word;
}
table.table-Synthese tr:hover td
{
	cursor: pointer;
	background-color: #767676;
	color: white;
}

Code javascript :

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
function Synthese(P_Action, P_)
{
    if (P_Action == "CREATION")
    {
        document.getElementById('div_synthese').innerHTML = "";
        let DivSynt = document.getElementById("div_synthese");
        DivSynt.classList.add("Div-Synthese");
 
        let TabSynt = document.createElement('table');
        TabSynt.id = "ID_TabSynt";
        TabSynt.border = "1";
        TabSynt.classList.add("table-Synthese");
        let NumCell = 0;
        for (let i = 0; i < G_NB_LIG_MAX_SYNTHESE; i++)
        {
            let LigSynt = TabSynt.insertRow(-1);
            LigSynt.id = "L" + twoDigit(i);
            for (let j = 0; j < G_NB_COL_MAX_SYNTHESE; j++)
            {
                let ColSynt = LigSynt.insertCell(-1);
                ColSynt.id = "Cell_" + twoDigit(NumCell);
                ColSynt.name = LigSynt.id + "C" + twoDigit(j);
                ColSynt.innerHTML = ColSynt.name + "<br/>" + ColSynt.id;
                NumCell = NumCell + 1;
            };
        };
        TabSynt.classList.add("table-Synthese");
        DivSynt.appendChild(TabSynt);
    };
    if (P_Action == "AJOUT")
    {
        // Conversion de P_Cellule en LnnCnn en passant par la table de conversion
        // Application de P_ClassFond à la cellule déterminée
        // Affichage de P_NomComplet dans la cellule ou en bulle d'aide         
 
        let i = 0; // On utilise pas la ligne 0 car c'est l'entête
        let TabDepend = document.getElementById("table_depend");
        let NbLigTab = TabDepend.getElementsByTagName('tr').length;
        let NomCell = "";
        let Cell_Synth_id = "";
        let NomFic = "";
        let NomCell_Depend = "";
        let NomFic_Depend = "";
        let PosDerSlash = 0;
        let NbCellule = 0;
        let NbCelluleMax = 0;
 
        while (i <= NbLigTab - 1)
        {
            NomCell_Depend = "DL" + twoDigit(i) + "C05";
            ObjCell_Depend = document.getElementById(NomCell_Depend);
            if (ObjCell_Depend !== null)
            {
                NomFic_Depend = document.getElementById(NomCell_Depend).textContent;
                PosDerSlash = NomFic_Depend.lastIndexOf("/");
                NomFic = NomFic_Depend.substring(PosDerSlash + 1, NomFic_Depend.length);
                NomCell_Synthese = "Cell_" + twoDigit(i); // Le numéro de cellule de la SYNTHESE commence à 0
                Cell_Synth_id = document.getElementById(NomCell_Synthese);
                Cell_Synth_id.innerHTML = NomFic;
                createTooltip(Cell_Synth_id, "auto", NomCell_Synthese, NomFic);
 
                let ListeClass = document.getElementById(NomCell_Depend).classList;
                if (ListeClass.contains("FondVert"))
                {
                    Cell_Synth_id.classList.add("FondVert");
                };
                if (ListeClass.contains("FondRouge"))
                {
                    Cell_Synth_id.classList.add("FondRouge");
                };
            }
            else
            {
                console.log("NULL i="+i)
            }
            NbCellule = NbCellule + 1;
            i = i + 1;
        }
// Supprimer les cases qui ne sont pas utilisées.
        NbCelluleMax = (G_NB_LIG_MAX_SYNTHESE * G_NB_COL_MAX_SYNTHESE);
        while (NbCelluleMax >= NbCellule - 1)
        {
            CellASupp = "Cell_" + twoDigit(NbCelluleMax);
            Cell = document.getElementById(CellASupp);
            if (Cell !== null)
            {
                CellID = Cell.id;
                CellName = Cell.name;
                LigID = Cell.parentElement.id;
                ObjLig = document.getElementById(LigID);
                ObjLig.deleteCell(-1);
            };
            NbCelluleMax = NbCelluleMax - 1;
        }
//        
    };
    let WTemplate = '<div class="tooltip"><div class="arrow tooltip-arrow"></div><div class="tooltip-head tooltipBkg"><i class="fa fa-info-circle"></span> <span class="tooltipHeadTitle">INFO</span> </div><div class="tooltip-inner tooltipBkg"></div></div>';
    $('[data-toggle="tooltip"]').tooltip(
    {
        template: WTemplate
    });
    //$('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="tooltip"]').tooltip("update");
}

Merci d'avance.