Bootstrap 4 responsive tables no ocupará el 100% de ancho

97

Estoy creando una aplicación web usando Bootstrap 4 y me encuentro con algunos problemas extraños. Quiero utilizar la clase de respuesta de tabla de Bootstrap para permitir el desplazamiento horizontal de las tablas en dispositivos móviles. En los dispositivos de escritorio, la mesa debe ocupar el 100% del ancho del DIV contenedor.

Tan pronto como aplico la clase .table-responsive a mi tabla, la tabla se encoge horizontalmente y ya no ocupa el 100% del ancho. ¿Algunas ideas?

Aquí está mi marcado:

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

Si aplico un ancho del 100% a la clase .table-responsive, hace que la tabla tenga un ancho del 100% pero los elementos secundarios (TBODY, TR, etc.) siguen siendo estrechos.

css bootstrap-4 comer-dormir-codigo
fuente

Respuestas:

158

Lo siguiente NO FUNCIONARÁ. Causa otro problema. Ahora tendrá el 100% de ancho, pero no responderá en dispositivos más pequeños:

.table-responsive {
    display: table;
}

Todas estas respuestas introdujeron otro problema al recomendar display: table;. La única solución a partir de ahora es usarlo como envoltorio:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>
John FatBoy Doeeee Rolla
fuente
2
Estuve inquieto con esto para siempre, demasiado pronto para pensar en simplemente envolverlo. Eres el hombre
JSF
¿Usar la table-responsiveclase como envoltorio se remonta a Bootstrap 3 ...? ¡Me alegro de que haya una solución por ahora! Bootstrap 4 Alpha ;-)
Steve Meisner
No veo este trabajo con beta. Parece que necesitará eliminar el div y agregar "table-responsive" a lo largo de "table". Así ... <table class = "table table-responsive">
Winnemucca
este problema aún no se ha resuelto en bootstrap 4, aunque una parte de está de acuerdo con su respuesta, las instrucciones de migración de bootstrap 3 a 4 dicen: "las tablas receptivas ya no requieren un elemento de envoltura. En su lugar, simplemente coloque el .table-responsive justo en la <tabla>. "... encontrado aquí: getbootstrap.com/docs/4.0/migration/#tables
Marin
¡Funciona perfectamente para mí en la versión 4.3.1! Gracias
Ibrahim Isa
38

Esta solución funcionó para mí:

simplemente agregue otra clase en su elemento de tabla: w-100 d-block d-md-table

por lo que sería: <table class="table table-responsive w-100 d-block d-md-table">

para bootstrap 4, w-100establezca el ancho en 100% d-block(pantalla: bloque) y d-md-table(pantalla: tabla en ancho mínimo: 576px)

Documentos de pantalla de Bootstrap 4

Faytraneozter
fuente
2
¡Funciona para Bootstrap4 Beta! La clave era w-100. gracias.
ObjectiveTC
¿Esta solución no tiene el mismo efecto que simplemente hacer <table class="table table-responsive-md">?
JamesWilson
21

Si está utilizando V4.1, y de acuerdo con sus documentos, no asigne .table-responsive directamente a la tabla. La tabla debe ser .table y si desea que sea desplazable horizontalmente (receptiva) agréguela dentro de un contenedor .table-responsive (a <div>, por ejemplo).

Las tablas receptivas permiten que las tablas se desplacen horizontalmente con facilidad. Haga que cualquier tabla responda en todas las ventanas gráficas envolviendo una .table con .table-responsive.

<div class="table-responsive">
  <table class="table">
  ...
  </table>
</div>

Al hacer eso, no se necesita CSS adicional.

En el código del OP, .table-responsive se puede usar junto con .col-md-12 en el exterior.

Marcelo Myara
fuente
3
Se supone que esta es la respuesta correcta desde la versión estable de bootstrap. Thx
Peter
2
Esta es la respuesta. Gracias
Gjaa
1
¡Respuesta correcta!
Andrew Schultz
6

Por alguna razón, la tabla receptiva en particular no se comporta como debería. Puede parchearlo deshaciéndose dedisplay:block;

.table-responsive {
    display: table;
}

Puedo presentar un informe de error.

Editar:

Es un error existente.

Serg Chernata
fuente
5

Ninguna de estas respuestas funciona (fecha de hoy 9 de diciembre de 2018). La resolución correcta aquí es agregar .table-responsive-sm a su tabla:

<table class='table table-responsive-sm'>
[Your table]
</table>

Esto aplica el aspecto de capacidad de respuesta solo a la vista SM (móvil). Entonces, en la vista móvil, obtiene el desplazamiento como desee y en vistas más grandes, la tabla no responde y, por lo tanto, se muestra en todo el ancho, como se desea.

Documentos: https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific

SongBox
fuente
2

La solución compatible con la versión 4 del marco es establecer el punto de interrupción adecuado. En lugar de usar .table-responsive, debería poder usar .table-responsive-sm (para responder solo en dispositivos pequeños)

Puede usar cualquiera de los extremos disponibles: table-responsive {-sm | -md | -lg | -xl}

Rubén_ic
fuente
1

Eso es porque la .table-responsiveclase agrega la propiedad display: blocka su elemento que la cambia del anterior display: table.

Reemplace esta propiedad display: tableen su propia hoja de estilo

.table-responsive {
    display: table;
}

Nota: asegúrese de que este estilo se ejecute después de su código de arranque para que se anule.

Nikhil Nanjappa
fuente
1

Se debe a que la table-responsiveclase le da a la tabla una propiedad de display:block, lo cual es extraño porque esto sobrescribe las tableclases originales display:tabley es por eso que la tabla se encoge cuando agrega table-responsive.

Lo más probable es que se deba a que bootstrap 4 aún está en dev. Es seguro sobrescribir esta propiedad con su propia clase que establece display:tabley no afectará la capacidad de respuesta de la tabla.

p.ej

.table-responsive-fix{
   display:table;
}
Callum
fuente
1

Teniendo en cuenta las otras respuestas, haría algo como esto, ¡gracias!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}
Alexis
fuente
1

Cree tablas receptivas envolviendo cualquier .table con .table-responsive {-sm | -md | -lg | -xl}, haciendo que la tabla se desplace horizontalmente en cada punto de corte de ancho máximo de hasta (pero sin incluir) 576px, 768px, 992px y 1120px, respectivamente.

simplemente envuelva la tabla con .table-responsive {-sm | -md | -lg | -xl}

por ejemplo 

<div class="table-responsive-md">
    <table class="table">
    </table>
</div>

bootstrap 4 tablas

iMezied
fuente
0

Descubrí que el uso de la clase de respuesta de tabla recomendada en un contenedor todavía hace que las tablas de respuesta se reduzcan (sorprendentemente) horizontalmente:

<div class="table-responsive-lg">
    <table class="table">
        ...
    </table>
</div>

La solución para mí fue crear los siguientes puntos de interrupción de medios y clases para evitarlo:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

Luego puedo agregar la clase apropiada a mi elemento de tabla. Por ejemplo:

<div class="table-responsive-lg">
    <table class="table table-lg">
        ...
    </table>
</div>

Aquí, el contenedor establece el ancho al 100% para mayor y mayor por Bootstrap. Con la clase table-lg aplicada al elemento de la tabla, el ancho de la tabla también se establece en 100% para grandes y mayores, pero se establece en 992px para medianos y pequeños. Las clases table-xs, table-sm, table-md y table-xl funcionan de la misma manera.

ScottyB
fuente
0

Para Bootstrap 4.x use las utilidades de visualización:

w-100 d-print-block d-print-table

Uso :

<table class="table w-100 d-print-block d-print-table">
Bora
fuente
0

Parece que el elemento "solo sr" y sus estilos dentro de la tabla son los que están causando este error. Al menos tuve el mismo problema y después de meses de golpearnos la cabeza contra la pared, eso es lo que determinamos que era la causa, aunque todavía no entiendo por qué. Agregar left:0a los estilos "solo sr" lo solucionó.

Bryn Newell
fuente