Força a largura das colunas da tabela a sempre ser fixada, independentemente do conteúdo

Eu tenho uma tabela html com table-layout: fixede um td com uma largura definida. A coluna ainda se expande para conter o conteúdo do texto que não contém um espaço. Existe uma maneira de corrigir isso além de envolver o conteúdo de cada td em uma div?

Exemplo: http://jsfiddle.net/6p9K3/29/

<table>
    <tbody>
        <tr>
            <td style="width: 50px;">Test</td>
            <td>Testing 1123455</td>
        </tr><tr>
            <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>B</td>
        </tr>
    </tbody>
</table>

table
{
    table-layout: fixed;
}

td
{
    border: 1px solid green;
    overflow: hidden;
}

No exemplo, você pode ver que a coluna com AAAAAAAAAAAA ... se expande apesar de ser explicitamente definida para 50px de largura.

Especifique a largura da mesa:

table
{
    table-layout: fixed;
    width: 100px;
}

Veja jsFiddle

Tente examinar o seguinte CSS:

word-wrap:break-word;

Os navegadores da Web não devem separar "palavras" por padrão, então o que você está experimentando é o comportamento normal de um navegador. No entanto, você pode sobrescrever isso com a diretiva CSS de quebra de linha.

Você precisaria definir uma largura na tabela geral e depois uma largura nas colunas. "largura: 100%;" também deve estar OK, dependendo de seus requisitos.

Usar a quebra de linha pode não ser o que você deseja, mas é útil para mostrar todos os dados sem deformar o layout.

Faça a mesa sólida ANTES do css. Calcule a largura da tabela e, em seguida, use uma linha de 'controle' em que cada td tem uma largura explícita, todos os quais somam a largura na tag da tabela.

Ter que enviar centenas de e-mails em html para funcionar em qualquer lugar, usando primeiro o HTML correto e, em seguida, estilizar w / css resolverá muitos problemas em todos os IE, webkit e mozillas.

então:

<table width="300" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50"></td>
    <td width="100"></td>
    <td width="150"></td>
  </tr>
  <tr>
    <td>your stuff</td>
    <td>your stuff</td>
    <td>your stuff</td>
  </tr>
</table>

Manterá uma mesa com 300px de largura. Observe imagens que são maiores do que a largura em extremos

Você pode adicionar um divao tde estilizá-lo. Deve funcionar como você esperava.

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

Em seguida, o css.

td div { width: 50px; overflow: hidden; }

Você também pode trabalhar com "overflow: hidden" ou "overflow-x: hidden" (apenas para a largura). Isso requer uma largura definida (e / ou altura?) E talvez um "display: block" também.

"Overflow: Hidden" oculta todo o conteúdo, que não cabe na caixa definida.

Exemplo:

http://jsfiddle.net/NAJvp/

HTML:

<table border="1">
    <tr>
        <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
        <td>bbb</td>
        <td>cccc</td>
    </tr>
</table>

CSS:

td div { width: 100px; overflow-y: hidden; }

EDIT: Que vergonha, eu vi, você já usa "overflow". Acho que não funciona, porque você não define "display: block" para o seu elemento ...

Eu tentaria defini-lo para largura máxima: 50px;

Você também pode usar porcentagens e / ou especificar nos cabeçalhos das colunas:

<table width="300">  
  <tr>
    <th width="20%">Column 1</th>
    <th width="20%">Column 2</th>
    <th width="20%">Column 3</th>
    <th width="20%">Column 4</th>
    <th width="20%">Column 5</th>
  </tr>
  <tr>
    <!--- row data -->
  </tr>
</table>

O bônus com porcentagens é menor manutenção de código: você pode alterar a largura da mesa sem ter que especificar novamente as larguras das colunas.

Advertência: é meu entendimento que a largura da tabela especificada em pixels não é compatível com HTML 5; você precisa usar CSS em vez disso.

Isso funciona para mim

td::after { 
content: ''; 
display: block; 
width: 30px;
}