I am making a page to register users and I am encrypting the passwords that are entered, the users are shown in a section of the page and all those who are registered are listed in a table, but I have a problem with the visibility of said table, since since I started encrypting passwords, the encrypted password; it's about 60 digits or so left and it causes the table to shift and stick to the right edge of the page leaving a lot of room on the left side. What I want is to center the table so that there is no such space and it looks better.
The code I have in my HTML template is the following:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<style>
body{
background:#0F3E45;
font-family:'Lato', sans-serif;
font-size: 16px;
font-weight: 600;
}
h1{
color:white;
}
h3{
color:white;
}
p{
color:white;
}
th{
color:white;
}
td{
color:white;
}
nav ul{
position:relative;
margin:auto;
width:50%;
text-align: center;
}
nav ul li{
display:inline-block;
width:24%;
line-height: 50px;
list-style: none;
}
nav ul li a{
color:white;
text-decoration: none;
}
nav ul li a:hover{
color:green;
text-decoration: none;
}
section{
position: relative;
margin: auto;
width:400px;
}
.form-group{
padding: 0;
}
.navbar-dark .navbar-brand:hover{
color:lightblue;
text-decoration: none;
}
section form input#usuarioRegistro{
text-transform: lowercase;
}
section h2{
color:white;
position: relative;
margin:auto;
text-align: center;
}
table{
position:relative;
margin:auto;
width:100%;
left:-15%;
}
table thead tr th{
padding:10px;
}
table tbody tr td{
padding:10px;
}
</style>
</head>
<body>
<?php include "modules/navegacion.php"; ?>
<section>
<?php
$mvc = new MvcController();
$mvc -> enlacesPaginasController();
?>
</section>
<script src="views/js/validarRegistro.js"></script>
<script src="views/js/validarIngreso.js"></script>
<script src="views/js/validarEdicion.js"></script>
</body>
</html>
In my view where the users are shown I have the following:
<div class="row">
<div class="col">
<div class="row my-5 d-flex justify-content-start">
<div class="col-12 ">
<h2>USUARIOS</h2>
</div>
</div>
<div class="container">
<div class=row>
<div class="col" >
<table class="table table-bordered table-striped table-sm">
<thead>
<tr>
<th class="text-center">Usuario</th>
<th class="text-center">Contraseña</th>
<th class="text-center">Email</th>
<th class="text-center">Editar</th>
<th class="text-center">Borrar</th>
</tr>
</thead>
<tbody>
<?php
$b=new MvcController();
$b->vistaUsuariosController();
$b->borrarUsuarioController();
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
It should be noted that I am filling the table from a database...
I leave an image of what the table looks like so you can understand what happens to me.
P.S. I already tried putting:
table{
margin: auto;
}
But it didn't work for me and the table is still in the same position. If anyone knows what I can change to make it work it would be very helpful.
I did a test with the code you posted and it doesn't show up like that. It shows centered but a bit to the left, which I fixed by removing this from the css:
The table is shifting to the right of the page because you are assigning a fixed width to the section that contains your table:
In addition to this, I recommend that you do not include several columns within others when it is not necessary.
It seems to me that bootstrap has a predefined class that works below with flexbox to center content horizontally with the property
justify-content
like so:That you could apply it to a
div
that wraps the entire tablecheck this link
it seems your problem is in these style lines.