[Bootstrap 3] Tableau non responsive

**Sebastien31t** · 17/08/2019, 13h00

Bonjour,
Je viens solliciter votre aide car je n'arrive pas a rendre responsive mon tableau (il ne renvoi pas a la ligne quand la phrase est trop longue au contraire il s’élargit).

ci dessous le code:

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
<div class="row">
            <div class="col-sm-12">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>Date report</th>    
                        <th>Cause</th>    
                    </tr>
                    </thead>
                    <tbody>
    <?php
    // recherche des données a afficher dans le tableau 
    $id_projet = $_GET['id'];
    $id_action = $_GET['action'];
    
    $sqltableau = "SELECT `TL_Action_Projet_Action`, `TL_Action_Projetcol_Projet`, date_format(TL_Action_Projet_Dte,'%d/%m%Y') as dte, `TL_Action_Projet_Cause` FROM `TL_Action_Projet` WHERE TL_Action_Projetcol_Projet = $id_projet AND TL_Action_Projet_Action = $id_action";
               
    $requetetableau = mysqli_query($conn, $sqltableau);
    if (mysqli_num_rows($requetetableau)){
        while ($donnetableau = mysqli_fetch_assoc($requetetableau)){
            echo
                '<tr>
                    <td>'.$donnetableau['dte'].'</td>
                    <td>'.$donnetableau['TL_Action_Projet_Cause'].'</td>
                </tr>';
        }
    }
    ?>
 
                    </tbody>
                </table>
            </div>
        </div><!-- fin de la row tableau -->

Merci de votre aide.
Cordialement.

**HiRoN** · 21/08/2019, 23h39

Salut,

En rajoutant un table-responsive sur le tableau cela fonctionne chez moi (bootstrap 3)

Exemple :

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
<div class="row">
  <div class="col-sm-12">
    <table class="table table-hover table-responsive">
      <thead>
        <tr>
          <th>Date report</th>      
          <th>Cause</th>    
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Colonne 1 très très très très très très très très longue</td>
          <td>Colonne 2 très très très très très très très très longue</td> 
        </tr>
        <tr>
          <td>Colonne 1 très très très très très très très très longue</td>
          <td>Colonne 2 très très très très très très très très longue</td> 
        </tr>
        <tr>
          <td>Colonne 1 très très très très très très très très longue</td>
          <td>Colonne 2 très très très très très très très très longue</td> 
        </tr>          
      </tbody>
    </table>
  </div>
</div>

CodePen : https://codepen.io/HiRoX83/pen/RwboeaY

**Sebastien31t** · 22/08/2019, 00h05

Bonsoir HiRoN,

Merci pour l'info j'avais testé mais je ne l'ai pas laissé dans mon code ça n'y a rien change chez moi

**Sebastien31t** · 22/08/2019, 10h28

Voici pour vous aider le code complet de la page:

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!doctype html>
<html lang="fr">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <!-- Bootstrap CSS -->
 
        <link href="dist/css/bootstrap.css" type="text/css" rel="stylesheet">
        <link href="style.css" type="text/css" rel="stylesheet">
        <link rel="shortcut icon" href="img/fav.ico" type="image/x-icon">
<meta charset="UTF-8">    
<meta http-equiv= »Content-Type » content= »text/html; charset=utf-8″ />
<script type="text/javascript" src="dist/js/jquery.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<title>
    Gestion de projet
</title>
        <style>
        @import url('https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap');
        </style>
<body>
<div class="container-fluid hauteur" style="padding: 15px">
    <div class="row">
        <div class="col-sm-8">
            <H4>Bienvenue Obierti Sébastien</H4>        </div>
        <div class="col-sm-4">
            <form action="fonction/deconnexion.php">
                <button class="btn btn-danger deconnexion" type="submit" >Deconnexion</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
        <nav class="navbar pull-right" >
    <ul class="nav nav-pills">
        <li><a href="accueilho.php" class="text-white"><span class="glyphicon glyphicon-home"></span> Accueil</a></li>
        <li><a href="moncompte.php" class="text-white"><span class="glyphicon glyphicon-user"></span> Mon compte</a></li>
         <li role="presentation" class="dropdown">
            <a class="text-white dropdown-toggle" data-toggle="dropdown" href="Accueilho.php" role="button" aria-haspopup="true" aria-expanded="false">
            utilisateur <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li role="presentation"><a href="ajoutuser.php">Créer un utilisateur</a></li>
                <li role="presentation"><a href="listuser.php">liste des utilisateurs</a></li>
            </ul>
        </li>            
        <li><a href="nouprojet.php" class="text-white"><span class="glyphicon glyphicon-pencil"></span> Nouveau projet </a></li>
        <li><a href="archive.php" class="text-white"><span class="glyphicon glyphicon-inbox"></span> Archive </a></li>
    </ul>
</nav>        </div>
    </div>
<hr>    
</div>
 
<div class="container container-padding ">
    <div class="row">
    <div class="col-sm-4 form-fond">
    <form action="traitement/reportactiontr.php" method="get">
        <input type="hidden" name="id" value="1">
        <input type="hidden" name="action" value="1">
        <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
                <label>Date de report</label>
                <input type="date" name="dtereport" class="form-control " required>
            </div>
            <div class="col-sm-1"></div>
        </div>
        <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
                <label>Cause du report</label>
                <input type="text" id="mcar" name="cause" required class="form-control ">
                <small class="margin-bottom">80 caractères maximum</small>
            </div>
            <div class="col-sm-1"></div>
        </div>
        <div class="row">
            <div class="col-sm-4"></div>
            <div class="col-sm-4">
                <input type="submit" id="valport" name="envoyer" class="btn btn-success btn-center margin-bottom">
            </div>
            <div class="col-sm-4"></div>
        </div>
    </form>
    </div>
    <div class="col-sm-1"></div><!-- separation page -->
    <div class="col-sm-7 form-fond">
        <div class="row">
            <div class="col">
                <table class="table table-hover table-responsive">
                    <thead>
                    <tr class="entete">
                        <th>Date report</th>    
                        <th>Cause</th>    
                    </tr>
                    </thead>
                    <tbody class="table-responsive">
    <tr>
                    <td>06/082019</td>
                    <td></td>
                </tr><tr>
                    <td>24/082019</td>
                    <td>cause test tableau pas encore dispo</td>
                </tr><tr>
                    <td>22/082019</td>
                    <td>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
                </tr><tr>
                    <td>29/082019</td>
                    <td>ttttttttttttttttttttttttttttttttttttttttyyyyyyyyyyyyyyyyyyyy</td>
                </tr><tr>
                    <td>29/082019</td>
                    <td>ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
                </tr><tr>
                    <td>29/082019</td>
                    <td>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
                </tr><tr>
                    <td>22/082019</td>
                    <td>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
                </tr><tr>
                    <td>28/082019</td>
                    <td>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
                </tr>                    
                    </tbody>
                </table>
            </div> <!-- fin de la colonne tableau -->
        </div><!-- fin de la row tableau -->
    </div> <!-- fin de la troisieme colonne --> 
</div>
</div>
 
<section class="piedpage">
    <div class="container container-padding">
        <div class="row">
            <div class="col-sm-12 center">
                <H1> Obierti.com &copy 2019</H1>            </div>
        </div>
    </div>
</section>
<section class="piedpage2">
<div class="container">
<div class="row">
    <div class="col-sm-4 center">
        <u><h3>Nous contacter</h3></u>
        <H4>Obierti Sébastien</H4>
        <p>
        <span class="glyphicon glyphicon-envelope"></span>
        962 route de Cornebarrieu<br>
        31840 Aussonne<br>
        <br>
        <span class="glyphicon glyphicon-phone"></span>
        Tel : 06 45 27 20 97
        <br>
        <span class="glyphicon glyphicon-envelope"></span>
        Mail : obierti.sebastien@gmail.com
        <br>        
        </p>
    </div>
    <div class="col-sm-4 center">
        <H3><u>
            Nos prestations
        </u></H3>
        <p>
 
        </p>
    </div>
    <div class="col-sm-4 center">
        <H3><u>A propos de nous</u></H3>
    </div>
</div>
</div>
    </section>
</body>
</html>

Merci de votre aide.

Invité · 22/08/2019, 11h38

Bonjour,

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
table td {
  word-break: break-word;
}

**HiRoN** · 22/08/2019, 14h17

Le fait de mettre des

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<td>ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>

Sans espaces ou autre n'est pas viable pour tester.

Il faudrait plutôt mettre des

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<td>ttttttttttttttttttttt tttttttttttttttttttttttttttttttt ttttttttttttttttttt ttttttyyyyyy yyyyyyyyyyyyyyyyy yyyyyyyyyyy</td>

(avec des espaces afin de simuler un comportement normal).

Sinon la solution de Jreaux pour forcer la césure est bonne.

**Sebastien31t** · 22/08/2019, 21h12

Merci,

En effet en rajoutant des espaces ca marche mieux

[Bootstrap 3] Tableau non responsive

Responsive design en CSS avec Bootstrap

Discussions similaires

Partager

Partager