Definir a largura da coluna da tabela constante, independentemente da quantidade de texto em suas células?


535

Na minha tabela, defino a largura da primeira célula em uma coluna 100px.
No entanto, quando o texto em uma das células nesta coluna é muito longo, a largura da coluna se torna maior que 100px. Como eu poderia desativar essa expansão?


5
stackoverflow.com/questions/1258416/word-wrap-in-a-html-table pode ajudar a direcioná-lo na direção certa
justinl

2
No meu caso, não houve expansão, mas o oposto: redução indesejada de largura, apesar da minha declaração explícita de largura. Ridículo!
Csaba Toth

A única solução correta para isso é usar colgroup com cols e definir a largura das cols.
MightyPork

table-layout:fixed;é a solução
emfi 29/08/2015

Respostas:


607

Eu brinquei um pouco porque tinha dificuldade em descobrir.

Você precisa definir a largura da célula ( thou tdfuncionou, eu defino os dois) E defina table-layoutcomo fixed. Por alguma razão, a largura da célula parece permanecer fixa apenas se a largura da tabela também estiver definida (acho isso tolo, mas o que for).

Além disso, é útil definir a overflowpropriedade hiddenpara impedir que qualquer texto extra saia da tabela.

Você também deve deixar todos os limites e dimensionamentos para CSS.

Ok, então aqui está o que eu tenho:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}
<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Aqui está no JSFiddle

Esse cara teve um problema semelhante: larguras de células da tabela - fixando largura, quebrando / truncando palavras longas


77
É importante observar o seguinte: "O navegador definirá as larguras das colunas com base na largura das células na primeira linha da tabela", de stackoverflow.com/questions/570154/…
daniloquio

12
Funciona quando a largura da tabela não é fixa. jsfiddle.net/lavinski/CGCFW/3 Você só precisa de uma linha dinâmica para ocupar o espaço restante.
Daniel Little

2
@DanielLittle Como alternativa, você pode definir a largura da tabela como 1px; com overflow: visiblepara tabelas de tamanho dinâmico, desde que o tamanho das células seja fixo e o estouro seja visível, não importa se o tamanho da tabela em si é maior ou menor que as células reais.
Mahn

O que você poderia fazer se o seu td tivesse "width = 30%;"?
71GA

Por favor, adicione o estouro: hidden @ RokoC.Buljan
Alex Grande

178

Consulte: http://www.html5-tutorials.org/tables/changing-column-width/

Após a tag da tabela, use o elemento col. você não precisa de uma tag de fechamento.

Por exemplo, se você tivesse três colunas:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>

26
Este! Esta é a resposta do HTML5 e funciona mal, sem que eu precise pular aros idiotas. Além disso, você pode usar <col class = "someClassName"> para manter suas larguras em CSS e não poluir seu HTML com informações de estilo.
John Munsch

2
@ Sam, você pode ter tido algum outro problema substituindo isso, como CSS, estilo embutido ou tipo de documento incorreto etc. Isso definitivamente funciona, é a maneira padrão de definir estilos de coluna.
Sameer Alibhai 27/01

Não tenho certeza se essa é a "maneira HTML5". Parece que colgroup / col em html5 é realmente usado apenas para marcar períodos. O MDN não menciona o uso do atributo style em tags col (exceto o que o herda de atributos globais) e apenas diz bgcolor: "... use a propriedade CSS ... nos elementos <td> relevantes". developer.mozilla.org/en-US/docs/Web/HTML/Element/col .
Stephen Panzer

5
Trabalhou para mim com estilo de mesa table-layout: fixed; width: 100%;. Obrigado!
Nrodic

Não é definitivo / definitivo, mas o w3schools também não menciona o uso coldisso. Ele sugere o uso de css aplicado a um <td>(ou um <th>) - w3schools.com/tags/att_td_width.asp
Don Cheadle

128

Basta adicionar <div>tag dentro <td>ou <th>definir largura dentro <div>. Isso irá ajudá-lo. Nada mais funciona.

por exemplo.

<td><div style="width: 50px" >...............</div></td>

2
Combinei esta solução também especificando largura mínima / largura máxima para a mesma largura de pixels, apenas para estar do lado seguro. Finalmente está funcionando. Eu não sei por que eu tenho que correr todas estas rodadas extras apenas obtê-lo realmente fixo, ridículo ...
Csaba Toth

1
Certeza de como isso é melhor do que a criação desse mesmo css style="width: 50px"no<td>
Don Cheadle

2
@mmcrae É melhor porque funciona, definir largura <td>não.
precisa saber é o seguinte

66

Se você precisar de mais uma ou mais colunas de largura fixa enquanto outras devem ser redimensionadas, tente definir ambas min-widthe max-widtho mesmo valor.


Isso funcionou para mim ao definir explicitamente a largura com table-layout: fixed;o não.
Jordan Mack

Puta merda! Nenhuma das outras soluções funcionou ou era muito desajeitada! Isso funcionou perfeitamente! Nenhuma div também é necessária!
NeilRoy 19/03

29

Você precisa escrever isso dentro do CSS correspondente

table-layout:fixed;

melhor tabela sorround com tags div, em seguida, dentro do uso de div overflow: auto
vinoth kumar

Funcionou para mim quando o combinei com os grupos de colunas: <table style = "table-layout: fixed"> <colgroup> <col style = "width: 50%"> <col style = "width: 50%"> </ colgroup> <tbody> ... </tbody> </table>.
Russ Bateman

Este artigo Chris Coyer explica muito bem: css-tricks.com/fixing-tables-long-strings
cssyphus

24

O que eu faço é:

  1. Defina a largura td:

    <td width="200" height="50"><!--blaBlaBla Contents here--></td>
  2. Defina a largura td com CSS:

    <td style="width:200px; height:50px;">
  3. Defina a largura novamente como max e min com CSS:

    <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Parece um pouco repetitivo, mas me dá o resultado desejado. Para conseguir isso com muita facilidade, você pode precisar colocar os valores CSS em uma classe na sua folha de estilos:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

então:

<td class="td_size">

Coloque o atributo de classe como <td>desejar.


Essa era a única solução que parecia funcionar em todos os casos sem impor restrições extras potencialmente indesejadas.
Sam

3

Eu usei isso

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}

Não se esqueça NTCH-criança (2) (ou 3, 4 e assim por diante)

mesa td nth-child (n + 1) {...} cobrirá todos, mas a primeira coluna
Ed Randall

2

Se você não deseja um layout fixo, especifique uma classe para o tamanho apropriado da coluna.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>

2

Também ajuda, colocar a última "célula de preenchimento", com a largura: auto . Isso ocupará o espaço restante e deixará todas as outras dimensões conforme especificado.


2

Faça a resposta aceita responder para telas pequenas quando menores que a largura fixa.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/



1

KAsun tem a ideia certa. Aqui está o código correto ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>

1

Conforme minha resposta aqui , também é possível usar um cabeçalho da tabela (que pode estar vazio) e aplicar larguras relativas para cada célula do cabeçalho da tabela. As larguras de todas as células no corpo da tabela estarão em conformidade com a largura do cabeçalho da coluna. Exemplo:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Ver resultado

Como alternativa, use colgroupcomo sugerido na resposta de Hyathin.


0

Eu uso um elemento :: after na célula em que desejo definir uma largura mínima, independentemente do texto presente, assim:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Não preciso definir a largura no pai da tabela nem usar o layout da tabela.


-4

Eu achei a resposta do KAsun funciona melhor usando vw em vez de px da seguinte forma:

<td><div style="width: 10vw" >...............</div></td>

Esse foi o único estilo necessário para ajustar a largura da coluna


-5

Você não precisa definir "fixed"- tudo o que você precisa é definir, overflow:hiddenpois a largura da coluna está definida.


3
O que ocultará o conteúdo atrás das bordas das células, não é uma boa ideia.
mystrdat
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.