[BootStrap] Tableau avec 18 colonnes titre s'affiche sur plusieurs lignes

**hbx360** · 23/03/2021, 17h33

Bonjour,

J'ai un problème sur mon tableau les titres des colonnes s'affiche sur plusieurs lignes et je n'arrive pas à redimensionner mes colonne en css. Voilà mon tableau :

Nom : tableau text s'affiche mal.png
Affichages : 1085
Taille : 17,5 Ko

Nom : tableau text s'affiche mal.png
Affichages : 1085
Taille : 17,5 Ko

Mon

Code html :

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
 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Liste des appels</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/4.5.3/bootstrap.min.css" id="bootstrap-css"/>
		<link rel="stylesheet" type="text/css" href="css/appels.css"/>
	</head>
	<body>
	<header>
		<nav class="navbar navbar-expand-lg navbar-dark bg-primary d-flex align-items-center">
			<div class=container>
  				<a class="navbar-brand" href="#">CLELIA</a>
   				<div class="collapse navbar-collapse" id="navbarColor01">
				    <ul class="navbar-nav mr-auto">
						<li class="nav-item">
					        <c:if test="${sessionScope.personne ne null}"><a class="liste-appels nav-link" href="#">Liste des appels</a></c:if>
      					</li>
      					<li class="nav-item">
        					<c:if test="${sessionScope.personne ne null and personne.email == 'fxcote@clelia.fr'}"><a class="liste-utilisateur nav-link" href="#">Liste des utilisateurs</a></c:if>
      					</li>
    				</ul>
  				</div>
  				<c:if test="${sessionScope.personne ne null}"><a class="deconnexion nav-link" href="deconnexion">Déconnexion</a></c:if>
			</div>
		</nav>
	</header>
 
	<main>
		<div class="container">
   		<h1 class="text-center mb-5 mt-1">Liste des appels</h1>
    	<div>
    		<div class="mb-3">
				<c:if test="${ sessionScope.joueur ne null}"><a href="/ajouter-un-jeu" class="btn btn-success button">Ajouter</a></c:if>
				<a href="/ajouter-un-appel" class="button btn btn-primary">Ajouter un appel</a>
			</div>
 
	    	<table class="table table-bordered mx-1 ">
			    <thead>
    			    <tr>
				<th >DATE ET HEURE <a href="index?sort=pageDAppels.dateHeure">trier</a></th>
        	    		<th >AGENCE <a href="index?sort=pageDAppels.agence.nom">trier</a></th>
	        	    	<th >DESTINATAIRE <a href="index?sort=pageDAppels.recuPar.initiales">trier</a></th>
	    	    	        <th >TYPE D'APPELANT<a href="index?sort=pageDAppels.typeAppelant.nom">trier</a></th>
    	    		        <th >NOMS <a href="index?sort=pageDAppels.nom">trier</a></th>
        			<th >PRENOMS <a href="index?sort=pageDAppels.prenom">trier</a></th>
       	    	    	        <th >N. DE MOBILE <a href="index?sort=pageDAppels.mobile">trier</a></th>
       	        		<th >N. DE FIXE <a href="index?sort=pageDAppels.telephone">trier</a></th>
       	        		<th >EMAIL <a href="index?sort=pageDAppels.email">trier</a></th>
       	        		<th >OBJET DE L'APPEL/COMMENTAIRE <a href="index?sort=pageDAppels.objet">trier</a></th>
       	        		<th >SUPPORT DE PUB <a href="index?sort=pageDAppels.annonce.nom">trier</a></th>
       	        		<th >ORIGINE CONTACT <a href="index?sort=pageDAppels.origine.nom">trier</a></th>
       	        		<th >TYPE CONTACT <a href="index?sort=pageDAppels.typeAppelant.nom">trier</a></th>
       	        		<th >NOM DU MANDAT <a href="index?sort=pageDAppels.nomDuMandat">trier</a></th>
       	        		<th >SAISIE PAR <a href="index?sort=pageDAppels.recuPar.initiales">trier</a></th>
       	        		<th >VU <a href="index?sort=pageDAppels.estAccuse">trier</a></th>
       	        		<th >ACTIONS/COMMENTAIRE <a href="index?sort=pageDAppels">trier</a></th>
       	        		<th >TRAITE <a href="index?sort=pageDAppels.estTermine">trier</a></th>
	        		</tr>
			    </thead>
	    		    <tbody>
     				<c:forEach items="${ pageDAppels.content }" var="appel">
        			<tr>
	        	    	                <td>${ appel.dateHeure }</td>
    	    		                        <td>${ appel.agence.nom }</td>
    		          	                <td>${ appel.recuPar.initiales }</td>
   						<td>${ appel.typeAppelant.nom }</td>
  						<td>${ appel.nom }</td>
  						<td>${ appel.prenom }</td>
		  				<td>${ appel.mobile }</td>
		  				<td>${ appel.telephone }</td>
						<td>${ appel.email }</td>
						<td>${ appel.objet }</td>
						<td>${ appel.annonce.nom }</td>
						<td>${ appel.origine.nom }</td>
						<td>${ appel.typeAppelant.nom }</td>
						<td>${ appel.nomDuMandat }</td>
						<td>${ appel.recuPar.initiales }</td>
						<td>${ appel.estAccuse }</td>
						<td></td>
						<td>${ appel.estTermine }</td>
	    	         </tr>
		    	 </c:forEach> 
     			</tbody>
			</table>
		</div>
	</div>
	<div class="d-flex justify-content-center">
		<nav aria-label="Page navigation">
		  	<ul class="pagination">
    			<li class="page-item"><a class="page-link" href="index?page=${ pageDAppel.number-1 }">Precedent</a></li>
				<c:forEach var="i" begin="1" end="${ pageDAppel.getTotalPages() }" step="1">
					<li class="page-item"><a class="page-link" href="index?page=${i-1}">${i}</a></li>
		    	</c:forEach>	
				<li class="page-item"><a class="page-link" href="index?page=${ pageDAppel.number < pageDAppel.getTotalPages()-1 ? pageDAppel.number + 1 : pageDAppel.getTotalPages()-1}">Suivant</a></li>
  			</ul>
		</nav>
	</div>
	</main>
	<footer>
		<section class="container" id="footer">
		</section>
	</footer>
	</body>
</html>