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

Respostas:

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