Por que as tabelas de inicialização do Twitter sempre têm 100% de largura?

148

Suponha esta marcação:

<table class="table table-bordered" align="center">

Não importa quantas células eu tenha, a tabela terá sempre 100% de largura. Por que isso?

twitter-bootstrap

— skowron-line
fonte

3

porque usa eficientemente a largura dos pais; é assim que o sistema de grade deve funcionar!

— Vishal

Qual largura você deseja que sua mesa tenha?

— Andres Ilich

1

Eu gostaria que fosse depent no número de células, assim como mesa comum

— skowron-line

1

Para aqueles que procurar a forma de largura da célula conjunto como div largura via extensão de verificar esta resposta

— alexche8

228

Todas as tabelas no bootstrap se estendem de acordo com o contêiner, o que você pode fazer facilmente colocando sua tabela dentro de um .span*elemento de grade de sua escolha. Se você deseja remover essa propriedade, pode criar sua própria classe de tabela e simplesmente adicioná-la à tabela na qual deseja expandir com o conteúdo:

.table-nonfluid {
   width: auto !important;
}

Você pode adicionar essa classe dentro de sua própria folha de estilo e simplesmente adicioná-la ao contêiner da sua tabela da seguinte maneira:

<table class="table table-nonfluid"> ... </table>

Dessa forma, sua alteração não afetará a própria folha de estilo de inicialização (você pode querer ter uma tabela fluida em outro lugar do documento).

— Andres Ilich
fonte

1

Se você colocar a tabela dentro de uma tag span *, para centralizar a tabela, você também incluiria um deslocamento *?

— HPWD 12/03/2013

@dlackey Sim, você pode deslocar a tabela com uma classe para centralizar, você pode até adicionar uma .span*classe à sua tabela para dar alguma largura.

— Andrés Ilich

2

Pelo menos com inicialização 3 que só funcionou para mim depois de adicionar !importantàwidth: auto

— geekQ

temos que usar span class de bootstarp para uma mesa, ou nós temos que dar manualmente um estilo para a classe .span,

— Jot Dhaliwal

1

Aviso. Tenha cuidado se usado em combinação com .table-responsive e .table-border. A borda é aplicada ao contêiner responsivo à tabela quando abaixo da largura da tela 767px. (bootstrap 3.x)

— Stuart

31

<table style="width: auto;" ...funciona bem. Testado no Chrome 38, IE 11 e Firefox 34.

jsfiddle: http://jsfiddle.net/rpaul/taqodr8o/

— Razan Paul
fonte

15

Se você estiver usando o Bootstrap 4, use .w-auto.

Consulte https://getbootstrap.com/docs/4.1/utilities/sizing/

— Danko Durbić
fonte

13

Resposta 1:

Por que lutar contra isso? Por que não simplesmente controlar a largura da sua tabela usando a grade de inicialização? Esta é a marcação do Bootstrap 3.

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

Isso criará uma tabela com metade (6 de 12) da largura do elemento que o contém.

Às vezes eu uso estilos embutidos conforme as outras respostas, mas isso é desencorajado.

Resposta nº 2:

Se você estiver usando o bootstrap 4, ele possui algumas boas classes auxiliares de largura, como:

w-25, w-50, w-75, and w-100

Aqui está o documento: https://getbootstrap.com/docs/4.0/utilities/sizing/

— Jess
fonte

2

esta é de longe a solução mais simples e deve ser a resposta aceita

— Jeff Brown

12

Eu estava tendo o mesmo problema, corrigi a tabela e especifiquei minha largura td. Se você tiver, também pode fazê-lo.

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

Não tive sorte com .table-nonfluid.

— DDDD
fonte

1

Tentewidth: auto !important;

— Leo

Você pode evitar !important(é uma prática ruim ). Veja o comentário em uma resposta abaixo .

— Ollie Bennett

3

Eu tentei adicionar style="width: auto !important"e funciona muito bem para mim!

— Sergey Dolgopolov
fonte

1

Se você garantir que seu CSS personalizado apareça após o CSS do Bootstrap (por exemplo, sua <link>tag de estilos personalizados apareça abaixo da <link>tag do Bootstrap ), as regras serão cascateadas conforme projetado e você não precisará usar sua !importantexceção. Isso ocorre porque width: 100%;está definido tableno CSS do Bootstrap e, portanto, está substituindo sua width: auto;regra.

— Ollie Bennett

Não é realmente uma resposta, é melhor editar a resposta atual aceita, que a maioria das pessoas lê (editei agora) .

— Iulian Onofrei