Largura fixa da célula da tabela

175

Muitas pessoas ainda usam tabelas para organizar controles, dados etc. - um exemplo disso é o popular jqGrid. No entanto, há alguma mágica acontecendo que eu não consigo entender (suas mesas gritam alto, quanta mágica poderia haver?)

Como é possível definir a largura da coluna de uma tabela e fazer com que ela seja obedecida como o jqGrid !? Se eu tentar replicar isso, mesmo que eu defina todas <td style='width: 20px'>, assim que o conteúdo de uma dessas células for maior que 20px, a célula se expandirá!

Alguma idéia ou insight?

Jimbo
fonte

Respostas:

249

Você pode tentar usar a <col>tag gerenciar o estilo da tabela para todas as linhas, mas precisará definir o table-layout:fixedestilo na <table>classe ou nas tabelas css e definir o overflowestilo para as células

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

e esse é o seu CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
caçador
fonte
15
col não iria funcionar em html5, largura conjunto de td indivíduo não por classes CSS ou CSS in-line
Pankaj Phartiyal
10
A resposta aceita não funcionará, a menos que você aplique explicitamente uma largura para a tabela desejada. Funciona perfeitamente se você usa uma unidade ou uma porcentagem. Achei que eu apontaria isso, já que a resposta de @ totymedli não recebeu nenhum voto e não queria que os usuários a ignorassem. No entanto, a sugestão de quebra de palavras não é necessária, a menos que seja o que você deseja.
thebdawk05
O que acontece quando você tem linhas com apenas 1 elemento TD que abrange várias colunas? Usando seu código de exemplo, se você tivesse <TD colspan="3">seguido por si só, seria 90px?
sab669
Graças ajudou. Para sobreposição de dados, adicione isso table.fixed td { word-wrap: break-word; }.
Parag Tyagi
A sugestão de quebra de palavras não é necessária, mas é útil para o restante dos usuários de SO e bastante pertinente à pergunta, pois o conteúdo excedente nas tabelas de largura fixa quase certamente ocorrerá na maioria dos cenários.
Amy Pellegrini
101

Agora, no HTML5 / CSS3, temos uma solução melhor para o problema. Na minha opinião, esta solução puramente CSS é recomendada:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

Você precisa definir a mesa widthmesmo na solução do haunter . Caso contrário, não funciona.
Também um novo recurso CSS3 que vsync sugerido é: word-break:break-all;. Isso quebrará as palavras sem espaços nelas em várias linhas também. Apenas modifique o código assim:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

Resultado final

Tabela renderizada

totymedli
fonte
Se você jogar uma linha com a colspan, isso parece quebrar essa solução. Alguma sugestão sobre como utilizar esta solução com uma tabela que contenha colspan> 1?
Eric K
@QuantumDynamix Corrigi isso incluindo a primeira linha, uma linha sem colunas, apenas todas as colunas individuais com larguras. Em seguida, ocultei essa linha com 0 altura, borda: nenhuma, visibilidade: oculta, preenchimento: 0px etc., então a segunda linha é a primeira que eu quero ver onde há colspans. A primeira linha com células individuais de largura fixa estabelece as larguras.
AaronLS
@totymedli Alguma idéia de como obter minha tabela com a soma de todas as larguras de coluna? Minha tabela é gerada dinamicamente um pouco e, portanto, não posso calcular antecipadamente a largura da tabela, mas não quero usar 100% porque isso estende alguns elementos.
AaronLS
14
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}
ajreal
fonte
9
Tem certeza de que pode usar table-layoutem um elemento td?
Nick
@ Nick - funciona bem. Hovewer Eu tenho que adicionar a propriedade min-width e max-width também (o mesmo valor que width) e, em seguida, tornou-se uma largura verdadeiramente fixa.
Denis Khay
11

Eu tinha uma célula td longa da tabela, isso forçou a tabela para as bordas do navegador e parecia feia. Eu só queria que essa coluna tivesse tamanho fixo e quebre as palavras quando atingir a largura especificada. Então, isso funcionou bem para mim:

<td><div style='width: 150px;'>Text to break here</div></td>

Você não precisa especificar nenhum tipo de estilo para a tabela, tr elementos. Você também pode usar overflow: hidden; conforme sugerido por outras respostas, mas faz com que o excesso de texto desapareça.

Tarik
fonte
2
Ou você pode usar a largura máxima em vez da largura, quando necessário. Isso permitirá que você não quebre o texto, a menos que atinja seu limite de largura. E a célula da tabela não terá espaço vazio se o texto for menor que a largura especificada. <td> <div style = 'max-width: 150px;'> Texto para quebrar aqui </div> </td>
Tarik
1
table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

user1993774
fonte
0

para tabela de largura FULLSCREEN:

  • a largura da mesa DEVE ser 100%

  • se precisar de N colunms, THs DEVE ser N + 1

exemplo para 3 colunas:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }
  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

Ramil Gilfanov
fonte
-2
table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: primeiro filho ...: enésimo filho (1) ou ...

xhdix
fonte