Largura fixa da célula da tabela

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?

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

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

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

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.

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

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>

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

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