Bootstrap datatable responsive

**patrick754** · 20/02/2020, 13h23

Bonjour

Je demande votre aide pour résoudre un problème de responsivité.

En fait j'ai un tableau que j'aimerai responsive, mais ça ne marche pas, quand je redimensionne la fenêtre, le tableau ne se redimensionne pas.

Possible de m'aider?

Code :

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
<html>
    <head>
        <title>Webslesson Demo - PHP PDO Ajax CRUD with Data Tables and Bootstrap Modals</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>      
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container box">
            <h1 align="center">test</h1>
            <br />
            <div class="table-responsive">
                <br />
                <div align="right">
                    <button type="button" id="add_button" data-toggle="modal" data-target="#userModal" class="btn btn-info btn-lg">Add</button>
                </div>
                <br /><br />
                <table id="user_data" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th width="10%">Image</th>
                            <th width="35%">First Name</th>
                            <th width="35%">Last Name</th>
                            <th width="10%">Edit</th>
                            <th width="10%">Delete</th>
                        </tr>
                    </thead>
                </table>
 
            </div>
        </div>
    </body>
</html>

Merci d'avance

Cordialement

Invité · 20/02/2020, 15h48

Bonjour,

avec ton code tel quel, ça fonctionne.

**patrick754** · 20/02/2020, 16h13

Bonjour @jreaux62
Merci de la réponse. Ci dessous le résultat sur mon écran
Nom : zs.png
Affichages : 1056
Taille : 7,6 Ko

Merci

Invité · 20/02/2020, 16h50

Ça ne vient pas du code que tu montres dans le 1er message, car il fonctionne (sans rien changer).

Sur quel navigateur (et version) testes-tu ?

Par contre, il manque le doctype :

Code :

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

1
2
3
4
<!DOCTYPE html>
<html>
<head>
...

**patrick754** · 20/02/2020, 19h02

J'utilise Google chrome version 80

**Trehinos** · 20/02/2020, 19h51

Quelle est la largeur de l'écran ? En dessous de 768px, c'est le comportement normal : https://getbootstrap.com/docs/3.4/cs...les-responsive (ou si vous avez un zoom actif dans votre navigateur).
Sinon un <table class="table"> est censé prendre 100% de la largeur du parent sans avoir besoin d'ajouter un wrapper responsive.

Cette classe est mal nommée et ne fait plus partie de Bootstrap 4.
Elle rend le tableau "responsive" dans le sens ou elle ajoute des ascenseurs autour de celui-ci quand le conteneur devient trop petit pour ne pas casser l'affichage sur mobile. Mais elle ne fixe pas la taille du tableau à 100% (ça c'est déjà le comportement par défaut).

Bootstrap datatable responsive

PHP & Base de données

Vue hybride

Discussions similaires

Partager

Partager