¿Cómo centrar una tabla, usando Bootstrap y CSS?

publicado por: Anonymous

Estoy haciendo una página para registrar usuarios y estoy encriptando las contraseñas que se ingresan, los usuarios se muestran en una sección de la página y todos los que estén registrados se van listando en una tabla, pero tengo un problema con la visibilidad de dicha tabla, ya que desde que empecé a encriptar las contraseñas, la contraseña encriptada; queda de unos 60 dígitos más o menos y hace que la tabla se desplace y se pegue al margen derecho de la página dejando mucho espacio del lado izquierdo. Lo que quiero es lograr centrar la tabla para que no quede dicho espacio y se vea mejor.

El código que tengo en mi plantilla HTML es el siguiente:

    <!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>

En mi vista donde se muestran lo susuarios tengo lo siguiente:

    <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>

Cabe destacar que la tabla la estoy llenando desde una base de datos…

Dejo una imagen de cómo se ve la tabla para que puedan entender lo que me ocurre.

Asi se ve la tabla

PD. Ya intenté colocando:

 table{ 
    margin: auto; 
 }

Pero no me funcionó y la tabla sigue quedando en la misma posición.
Si alguien sabe qué puedo cambiar para que funcione, sería de mucha ayuda.

solución

Al margen del código que ya tienes, considero deberías ocupar solo las clases que ya provee el framework para tales efectos; entonces has esto:

Me parece bootstrap posee una clase predefinida que trabaja por debajo con flexbox para centrar contenido horizontalmente con la propiedad justify-content de este modo:

.justify-content-center

Que se lo pudieras aplicar a un div que envuelva a toda la tabla

Revisa este enlace

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.