Forcer la taille de cellule et tronquer le texte si besoin

**Zebulon777** · 04/02/2021, 12h24

Bonjour à tous.

Nom : C1.png
Affichages : 145
Taille : 141,0 Ko

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.

**Zebulon777** · 04/02/2021, 16h48

Bon, ben j'ai réussit et voici ma solution, si ça peut aider :

Nom : C2.png
Affichages : 109
Taille : 133,0 Ko

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
29
30
31
32
33
34
35
36
 
.Div-Synthese {
    background-color:transparent;
}
.Div-Cell-Synthese {
    overflow: hidden;
    max-width: 60px;
    max-height: 75px;
    min-height:50px;
    height:60px;
}
 
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: 75px;
    min-height:50px;
    height:60px;
/*    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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
function Synthese(P_Action, P_Champs01, P_NumSrc)
{
    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;
 
                let ColSynt = LigSynt.insertCell(-1);
                ColSynt.id = "Cell_" + twoDigit(NumCell);
                ColSynt.name = LigSynt.id + "C" + twoDigit(j);
                let DivCell = document.createElement("div");
                DivCell.id = "DivCell_" + twoDigit(NumCell);
                DivCell.innerHTML = ColSynt.name + "<br/>" + ColSynt.id;
                ColSynt.appendChild(DivCell);
                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;
        let DivCell = "";
        let DivCell_id = "";
 
        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);
                DivCell = "DivCell_" + twoDigit(i);
                DivCell_id = document.getElementById(DivCell);
                DivCell_id.innerHTML = NomFic;
                DivCell_id.classList.add("Div-Cell-Synthese");
                Cell_Synth_id.appendChild(DivCell_id);
                createTooltip(DivCell_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");
                };
//// Ajout de la fenêtre modale                
//                document.getElementById(Cell_Synth_id).onclick = function ()
//                {
//// -> Récupérer les éléments à fournir
//  
//                    alert("click sur " + Cell_Synt_id);
////                    let WNumSrc = WCell01.innerHTML; // ATTENTION -> DOIT CONTENIR LE NUMERO SRC POUR COPRRESPONDRE AU NUMERO DEPENDANCE
////                    AffNiveau2(this.id, this.rowIndex, P_Champs01, WFic, WNomComplet, WFormatNiv2, WNumSrc);
//                }                
            }
            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");
}

Forcer la taille de cellule et tronquer le texte si besoin

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager