Bonjour,

Je rencontre un problème avec la fonction overflow-y:auto, quand je l'ajoute à mon tbody,ma page présente une largeur de plus qui se rajoute à droite de la page et qui active un scrolling de la page alors que je voudrais que mon tableau reste centré au milieu de la page tout simplement.. Pourtant le scrolling marche parfaitement en lui-même..

Voici une petite illustration pour comprendre :

Sans la barre de scrolling :

Nom : Capture d’écran 2019-09-12 à 11.40.55.png Affichages : 538 Taille : 264,9 Ko

Avec la barre de scrolling :

Nom : Capture d’écran 2019-09-12 à 11.41.25.png Affichages : 468 Taille : 270,6 Ko

Voici mon code HTML :

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
180
181
182
183
184
<!DOCTYPE html>
<html>
<head>
	<title>PA - Liste des utilisateurs</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/list.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="icon" href="https://www.proactiveacademy.fr/wp-content/uploads/2018/01/cropped-favicon-32x32.png" sizes="32x32" />
  <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body class="d-flex flex-column justify-content-center">
  <div id="page-content">
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
      <a class="navbar-brand"><img src="http://www.proactiveacademy.fr/wp-content/uploads/2018/01/p-proactive-1.png" class="img-fluid" alt="Responsive image"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav mx-auto">
          <li class="nav-item">
            <?php
$sql = $db->prepare('SELECT * FROM BDD ORDER BY Id DESC LIMIT 50');
$sql -> execute(array()); //Exécution de la requete
 
while ($ligneencours = $sql -> fetch(PDO::FETCH_ASSOC)) { //Tant qu'il y a un enregistrement dans la table on l'associe à une ligne du tableau
    // Les lignes de variables du tableau
    $export[] = array($ligneencours["Id"], $ligneencours["id_cv"], $ligneencours["Nom"], $ligneencours["Prenom"], $ligneencours["Telephone"], $ligneencours["Email"], $ligneencours["QPV"], $ligneencours["Sexe"], $ligneencours["Ville"], $ligneencours["CodePostale"], $ligneencours["Adresse"], $ligneencours["Diplomevise"], $ligneencours["Contratvise"], $ligneencours["Dernierdiplome"], $ligneencours["Niveaudeformation"], $ligneencours["Secteuractivité"], $ligneencours["Formationvise"], $ligneencours["Specialitee"], $ligneencours["Niveau"], $ligneencours["Metier"], $ligneencours["Rythme"], $ligneencours["Structure"], $ligneencours["Sourcing"]);
}
 
    // Nom du fichier et delimiteur entre chaque entrées
    $chemin = 'inscrits.csv';
    $delimiteur = ';'; // Pour une tabulation, $delimiteur = "t";
 
    // Création du fichier csv
    // fopen : Ouvre un fichier
    /*
        w+ : Ouvre en lecture et écriture ;
        Place le pointeur de fichier au début du fichier et réduit la taille du fichier à 0.
        Si le fichier n'existe pas, on tente de le créer.
    */
    $fichier_csv = fopen($chemin, 'w+');
 
    /*
        Si votre fichier a vocation a être importé dans Excel,
        vous devez impérativement utiliser la ligne ci-dessous pour corriger
        les problèmes d'affichage des caractères internationaux (les accents par exemple)
    */
    fprintf($fichier_csv, chr(0xEF).chr(0xBB).chr(0xBF));
 
    // On affiche une fois l'entête sans boucle
    $entetes = array('Id', 'Nom_CV', 'Nom', 'Prénom', 'Telephone', 'Email', 'QPV', 'Sexe', 'Ville', 'Code Postal', 'Adresse', 'Diplome visé', 'Contrat visé', 'Dernier Diplôme', 'Niveau de formation', 'Secteur Activité', 'Formation visé', 'Specialitée', 'Niveau', 'Métier', 'Rythme', 'Structure', 'Sourcing');
    fputcsv($fichier_csv, $entetes, $delimiteur);
 
    // Boucle foreach sur chaque ligne du tableau
    // Boucle pour se déplacer dans les tableaux
    foreach ($export as $ligneaexporter) {
        // chaque ligne en cours de lecture est insérée dans le fichier
        // les valeurs présentes dans chaque ligne seront séparées par $delimiteur
        fputcsv($fichier_csv, $ligneaexporter, $delimiteur);
    }
 
    // fermeture du fichier csv
    fclose($fichier_csv);
 ?>
            <a class="nav-link" href="inscrits.csv"><i class="fas fa-download"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="add.php"><i class="fas fa-user-plus"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="add_csv.php"><i class="fas fa-users"></i></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="logout.php"><i class="fas fa-sign-out-alt"></i></a>
          </li>
        </ul>
      </div>
              <span class="navbar-text right-align" style="text-align: right;">Bienvenue, <?php echo $_SESSION['Prenom']?></span>
    </nav>
	</header>
  <?php
  if (!empty($_POST["delete"])) {
      echo "<div class=\"alert alert-success \"><center><strong>Parfait !</strong><class=\"alert-link\"> Les ou les utilisateurs ont bien été supprimés.</center></div>";
  }
    ?>
	<main class="flex-fill justify-content-center align-items-center">
        <div class="main"><br/><br/>
            <div class="container-fluid"><br/><br/>
              <div class="options">
                <div class="form-group has-search">
                  <span class="fa fa-search form-control-feedback"></span>
                <form method="post" action="list.php">
                <div class="searchbar"><input type="text" class="form-control" value="Rechercher un utilisateur" name="Search" onclick="this.value='';"></div></form>
                <form method="post" action="list.php">
                  <input type="submit" class="btn btn-danger" style="width: 130px;" value="Supprimer" name="supprimer">
                </div>
              </div>
            <div class="row h-1">
                <div class="col-sm-13 mx-auto">
              <table class="table table-striped table-responsive table-hover" id="myTable">
              <thead class="thead-dark" style="width:10%;">
                <tr>
                    <th style="width:2%;" id="Choix"></th>
                    <th id="Nom" class="selection" data-tri="1" data-type="num">NOM</th>
                    <th id="Prenom">PRÉNOM</th>
                    <th id="Sexe">SEXE</th>
                    <th id="Telephone" >TELEPHONE</th>
                    <th id="E-mail">EMAIL</th>
                    <th id="Code-Postale" scope="col">CODE POSTALE</th>
                    <th id="Adresse" scope="col">ADRESSE</th>
                    <th id="Ville" scope="col">VILLE</th>
                    <th id="QPV" scope="col">QPV</th>
                    <th id="DernierDiplome" scope="col">DERNIER DIPLÔME</th>
                    <th id="Formationvise" scope="col">FORMATION VISEE</th>
                    <th id="Specialitee" scope="col">SPECIALITEE</th>
                    <th id="Niveau" scope="col">NIVEAU DE FORMATION VISE</th>
                    <th id="Metier" scope="col">METIER</th>
                    <th id="Contratvise" scope="col">CONTRAT VISE</th>
                    <th id="Rythme" scope="col">RYTHME D'ALTERNANCE</th>
                    <th id="Structure" scope="col">STRUCTURE</th>
                    <th id="Entreprise" scope="col">ENTREPRISE</th>
                    <th id="Commentaires" scope="col">COMMENTAIRES</th>
                    <th id="Upload" style="width:6%" scope="col">UPLOAD</th>
                    <th style="width:7%;" id="Edit" scope="col">MODIFICATION</th>
                    <th id="CV" style="width:5%;" scope="col"></th>
                </tr>
              </thead>
              <tbody>
<?php           while ($donne = $requete_page->fetch()) { ?>
				<tr>
					<td class="w-25"><input type="checkbox" name="delete[]" value="<?php echo $donne['Id']; ?>" /></td>
					<td class="w-25"><?php echo $donne['Nom']; ?></td>
					<td class="w-25"><?php echo $donne['Prenom']; ?></td>
					<td><?php echo $donne['Sexe']; ?></td>
					<td><?php echo $donne['Telephone']; ?></td>
					<td><?php echo $donne['Email']; ?></td>
					<td><?php echo $donne['CodePostale']; ?></td>
          <td><?php echo $donne['Adresse']; ?></td>
          <td><?php echo $donne['Ville']; ?></td>
					<td><?php echo $donne['QPV']; ?></td>
          <td><?php echo $donne['Dernierdiplome']; ?></td>
          <td><?php echo $donne['Formationvise']; ?></td>
          <td><?php echo $donne['Specialitee']; ?></td>
          <td><?php echo $donne['Niveau']; ?></td>
          <td><?php echo $donne['Metier']; ?></td>
          <td><?php echo $donne['Contratvise']; ?></td>
          <td><?php echo $donne['Rythme']; ?></td>
          <td><?php echo $donne['Structure']; ?></td>
          <td><?php echo $donne['Entreprise']; ?></td>
          <td><?php echo $donne['Commentaires']; ?></td>
          <td class="w-25"><a class="btnEdit btn btn-primary btn-sm" href="upload.php?id=<?php echo $donne['Id']; ?>">Upload</a></td>
					<td><a class="btnEdit btn btn-primary btn-sm" href="edit.php?id=<?php echo $donne['Id']; ?>">Editer</a></td>
          <td><a class="btnEdit btn btn-primary btn-sm" href="<?php echo $donne['id_cv'];?>">CV</a></td>
				</tr>
        <?php           } ?>
                      </tbody>
                      </table>
                      &nbsp;
 
                <ul class="pagination justify-content-center">
                  <li class="page-item">
        <?php           for ($i=1; $i<=$page_total; $i++) { ?>
        			 <li class="page-item"><a class="page-link" href="list.php?page=<?php echo $i; ?>"><?php echo "$i"; ?></a>
        <?php           }?>
        </li>
        </ul>
			  </div>
      </div>
      </div>
        </div>
      </div>
      </form>
    </div>
	</main>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
<div class="footer">
      <div class="footer-copyright text-center py-3"><hr class="my-4" style="margin: auto;width: 40%;"></br><p class="text-muted">© <?php echo date("Y"); ?> Codé par Ethan Selleron</small></p></div>
</div>
</div>
</html>

Ainsi que le CSS complet de ma page :

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
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
page-content {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 100%;
  min-height: 100vh;
  max-height: 100%;
  display: flex;
  align-items: center;
}
 
body {
  background-color: #E8ECEF;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
 
body>.container {
  padding-top: 60px;
}
 
img {
  width: 25%;
}
 
.navbar {
  border-bottom-style: solid;
  border-bottom-color: white;
}
 
.table {
  max-width: 100%;
  table-layout: fixed;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
 
th {
  font-size: 12.5px;
  max-width: 80px;
}
 
td {
  max-width: 80px;
}
 
td:hover {
  text-overflow: clip;
}
 
.th:hover {
  overflow: visible;
  white-space: normal;
  height: auto;
}
 
tr {
  font-size: 11px;
  text-align: center;
}
 
.footer {
  bottom: 0px;
}
 
.options {
  width: 90%;
  border-radius: 7px;
  margin-left: 5%;
  position: relative;
}
 
.form-control {
  position: absolute;
  width: 20%;
  margin-left: 80%;
}
 
.has-search .form-control {
  padding-left: 2.375rem;
}
 
.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #aaa;
  margin-left: 80%;
}
 
.main {
  margin-top: -50px;
}
 
.pagination {
  width: 100%;
}
 
.pagination a {
  text-decoration: none;
  color: black;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
 
.container {
  width: 100%;
}
 
tbody {
  display: sticky;
  overflow-y: scroll;
}

En vous remerciant,