As tabelas responsivas do Bootstrap 4 não ocupam 100% da largura

96

Estou construindo um aplicativo da web usando o Bootstrap 4 e encontrando alguns problemas estranhos. Desejo utilizar a classe de resposta de tabela do Bootstrap para permitir a rolagem horizontal das tabelas em dispositivos móveis. Em dispositivos desktop, a mesa deve ocupar 100% da largura do DIV que o contém.

Assim que eu aplico a classe .table-responsive à minha mesa, a mesa encolhe horizontalmente e não ocupa mais 100% da largura. Alguma ideia?

Aqui está minha marcação:

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

Se eu aplicar uma largura de 100% à classe .table-responsive, a própria tabela terá 100% de largura, mas os elementos filhos (TBODY, TR etc.) ainda serão estreitos.

css bootstrap-4

— coma-sono-código
fonte

158

O seguinte NÃO FUNCIONARÁ. Isso causa outro problema. Agora terá 100% de largura, mas não responderá em dispositivos menores:

.table-responsive {
    display: table;
}

Todas essas respostas introduziram outro problema ao recomendar display: table;. A única solução agora é usá-lo como um invólucro:

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

— John FatBoy Doeeee Rolla
fonte

2

Fiquei inquieto com isso por uma eternidade - muito cedo para pensar em simplesmente embrulhar. Você é o homem

— JSF

Usar a table-responsiveclasse como um invólucro remete ao Bootstrap 3 ...? Ainda bem que existe uma solução por agora! Bootstrap 4 Alpha ;-)

— Steve Meisner

Não vendo este trabalho com beta. Parece que você precisará remover o div e adicionar "table-responsive" ao longo de "table". Assim .. <table class = "table table-responsive">

— Winnemucca

este problema ainda não foi resolvido no bootstrap 4, embora uma parte de concorde com sua resposta, as instruções de migração do bootstrap 3 para o estado 4: "as tabelas responsivas não precisam mais de um elemento de agrupamento. Em vez disso, apenas coloque o .table-responsive diretamente na <table>. "... encontrado aqui: getbootstrap.com/docs/4.0/migration/#tables

— Marin

Funciona perfeitamente para mim na versão 4.3.1! Obrigado

— Ibrahim Isa

38

Esta solução funcionou para mim:

basta adicionar outra classe em seu elemento de tabela: w-100 d-block d-md-table

então seria: <table class="table table-responsive w-100 d-block d-md-table">

para bootstrap 4 w-100defina a largura para 100% d-block(display: block) e d-md-table(display: table on min-width: 576px)

Bootstrap 4 exibir docs

— Faytraneozter
fonte

2

Funciona para Bootstrap4 Beta! A chave era w-100. obrigado.

— ObjectiveTC

Esta solução não tem o mesmo efeito que apenas fazer <table class="table table-responsive-md">?

— JamesWilson

20

Se você estiver usando a V4.1, e de acordo com seus documentos, não atribua .table-responsive diretamente à tabela. A tabela deve ser .table e se você quiser que seja rolável horizontalmente (responsiva), adicione-a dentro de um contêiner responsivo .table (a <div>, por exemplo).

As tabelas responsivas permitem que as tabelas sejam roladas horizontalmente com facilidade. Torne qualquer tabela responsiva em todas as janelas de exibição, envolvendo um .table com .table-responsivo.

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

fazendo isso, nenhum css extra é necessário.

No código do OP, .table-responsive pode ser usado junto com .col-md-12 na parte externa.

— Marcelo Myara
fonte

3

Essa é supostamente a resposta certa desde a versão estável do bootstrap. Thx

— Peter

2

Esta é a resposta. Obrigado

— Gjaa

1

Resposta correta!

— Andrew Schultz

6

Por algum motivo, a tabela responsiva em particular não se comporta como deveria. Você pode consertar eliminandodisplay:block;

.table-responsive {
    display: table;
}

Posso registrar um relatório de bug.

Editar:

É um bug existente.

— Serg Chernata
fonte

5

Nenhuma dessas respostas está funcionando (data de hoje, 9 de dezembro de 2018). A resolução correta aqui é adicionar .table-responsive-sm à sua tabela:

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

Isso se aplica ao aspecto de capacidade de resposta apenas para a visualização SM (móvel). Assim, na visualização móvel, você obtém a rolagem conforme desejado e em visualizações maiores a tabela não responde e, portanto, é exibida em largura total, conforme desejado.

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

— SongBox
fonte

2

A solução compatível com a v4 do framework é definir o ponto de interrupção adequado. Em vez de usar .table-responsive, você deve ser capaz de usar .table-responsive-sm (para ser responsivo apenas em dispositivos pequenos)

Você pode usar qualquer um dos endpoints disponíveis: table-responsive {-sm | -md | -lg | -xl}

— Rubén_ic
fonte

1

Isso ocorre porque a .table-responsiveclasse adiciona a propriedade display: blockao seu elemento, o que o altera do anteriordisplay: table .

Substitua esta propriedade de volta display: tableem sua própria folha de estilo

.table-responsive {
    display: table;
}

Nota: certifique-se de que este estilo seja executado após o código de bootstrap para que ele seja sobrescrito.

— Nikhil Nanjappa
fonte

1

É causado pela table-responsiveclasse dar à tabela uma propriedade de display:block, o que é estranho porque isso sobrescreve as tableclasses originais display:tablee é por isso que a tabela encolhe quando você adicionatable-responsive .

O mais provável é que o bootstrap 4 ainda esteja em desenvolvimento. Você está seguro para sobrescrever esta propriedade com sua própria classe que definedisplay:table e isso não afetará a capacidade de resposta da tabela.

por exemplo

.table-responsive-fix{
   display:table;
}

— Callum
fonte

1

Levando em consideração as outras respostas eu faria algo assim, obrigado!

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

— Alexis
fonte

1

Crie tabelas responsivas envolvendo qualquer .table com .table-responsive {-sm | -md | -lg | -xl}, fazendo a tabela rolar horizontalmente em cada ponto de interrupção de largura máxima de até (mas não incluindo) 576px, 768px, 992px e 1120px, respectivamente.

basta embrulhar a tabela com .table-responsive {-sm | -md | -lg | -xl}

por exemplo

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

tabelas de bootstrap 4

— iMezied
fonte

0

Descobri que usar a classe responsiva à tabela recomendada em um wrapper ainda faz com que as tabelas responsivas encolham (surpreendentemente) horizontalmente:

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

A solução para mim foi criar os seguintes pontos de interrupção de mídia e classes para evitá-lo:

.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%;
    }
}

Então, posso adicionar a classe apropriada ao meu elemento de tabela. Por exemplo:

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

Aqui, o wrapper define a largura em 100% para grande e maior por Bootstrap. Com a classe table-lg aplicada ao elemento da tabela, a largura da tabela também é definida como 100% para grande e maior, mas definida como 992px para média e menor. As classes table-xs, table-sm, table-md e table-xl funcionam da mesma maneira.

— ScottyB
fonte

0

Para Bootstrap 4.x, use os utilitários de exibição:

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

Uso :

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

— Bora
fonte

0

Parece que o elemento "sr-only" e seus estilos dentro da tabela são o que está causando esse bug. Pelo menos eu tive o mesmo problema e depois de meses batendo a cabeça contra a parede foi isso que determinamos que era a causa, embora ainda não entenda o porquê. Adicionar left:0aos estilos "somente sr" corrigiu isso.

— Bryn Newell
fonte