Cómo agregar bordes a una tabla receptiva en Bootstrap 3

Te doy la bienvenida a nuestra web, en este lugar vas a hallar la respuesta a lo que andabas buscando.

Solución:

Parece que su clase de panel tiene una propiedad CSS

.panel>.table-bordered, .panel>.table-responsive>.table-bordered border:0;

y eso hace que el borde exterior de su tabla sea invisible. Puede proporcionar explícitamente

border: 1px solid #ddd !important; si necesario.

    


     ...  ... 

    

O puede eliminar la clase de panel y usar otra cosa. Eso también podría funcionar. Siempre puede mirar para inspeccionar el elemento para ver qué clases y qué propiedad CSS está usando cualquier elemento.

Aún así, no obtendrá la frontera. Además, asegúrese de que el color del borde y el color de fondo de la tabla no sean iguales.

También veo este problema por casualidad. Es muy interesante lo que encontré:

dentro de una consulta de medios screen and (max-width: 767px)lo que significa en un dispositivo de pantalla estrecha, o dentro de un panel,

.table-responsive > .table-bordered están configurados para no tener bordes en Bootstrap3. No conozco ninguna razón para que Bootstrap haga esto intencionalmente.

Esa parte del código fuente de Bootstrap3 se ve así:

@media screen and (max-width: 767px) 
...
  .table-responsive > .table-bordered 
    border: 0;
  
...


.panel > .table-bordered,
.panel > .table-responsive > .table-bordered 
  border: 0;

Actualización: sé la razón por la que Bootstrap está haciendo eso. Para pantalla estrecha,