Largura Fixa Da Célula Da Tabela

muitas pessoas ainda usam tabelas para os controlos de layout, dados, etc. - um exemplo disto é o popular jqGrid. No entanto, há alguma magia acontecendo que eu não consigo entender (suas mesas, por amor de Deus, quanta magia poderia haver?)

Como é possível definir a largura da coluna de uma tabela e obedecê-la como o jqGrid faz!? Se eu tentar replicar isso, mesmo se eu definir cada {[[0]}, assim que o conteúdo de uma dessas células for maior que 20px, a cela expande-se!

Alguma ideia ou ideia?

Author: Christopher Rapcewicz, 2010-11-15
Source

7 answers

Poderá tentar usar a marca <col> para gerir o estilo da tabela para todas as linhas, mas terá de definir o estilo table-layout:fixed na classe <table> ou nas tabelas CSS e definir o estilo overflow para as células

Http://www.w3schools.com/TAGS/tag_col.asp

<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 este é o teu CSS. 
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
 256
Author: hunter, 2020-09-29 17:36:31
Agora em HTML5 / CSS3 temos uma solução melhor para o problema. Na minha opinião, recomenda-se esta solução puramente CSS: 

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>

Tens de pôr a mesa mesmo na solução da assombração . Caso contrário, não funciona.
Também uma nova característica CSS3 que Vsync sugeriu é: word-break:break-all;. Isto irá quebrar as palavras sem espaços nelas para várias linhas também. Apenas modifique o código assim: 

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

Rendered table

 102
Author: totymedli, 2017-05-23 11:33:26 
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}
 15
Author: ajreal, 2013-05-09 15:50:31
Eu tinha uma longa célula td da mesa, que forçou a mesa para as bordas do navegador e parecia feia. Eu só queria que a coluna fosse apenas tamanho fixo e quebrasse as palavras quando atingisse a largura especificada. Então, isto funcionou bem para mim. 
<td><div style='width: 150px;'>Text to break here</div></td>

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

 14
Author: Tarik, 2015-12-07 11:44:19 
table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

 1
Author: user1993774, 2013-01-19 23:46:10

Para a tabela de largura do ecrã completo:

  • A largura da mesa deve ser 100%

  • Se necessário n colunms, então 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>
 0
Author: Ramil Gilfanov, 2020-06-04 10:34:58 
table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

:primeiro filho ... : nth-child(1) or ...

 -2
Author: xhdix, 2015-04-13 19:58:53