Forza la fissazione delle larghezze delle colonne della tabella indipendentemente dal contenuto

Ho una tabella html con table-layout: fixede un td con una larghezza impostata. La colonna si espande ancora per contenere il contenuto del testo che non contiene spazi. C'è un modo per risolvere questo problema oltre a racchiudere il contenuto di ogni td in un div?

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

Nell'esempio, puoi vedere che la colonna con AAAAAAAAAAAA ... si espande nonostante sia impostata esplicitamente su una larghezza di 50 px.

Specifica la larghezza della tabella:

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

Vedi jsFiddle

Prova a esaminare il seguente CSS:

word-wrap:break-word;

I browser Web non dovrebbero suddividere le "parole" per impostazione predefinita, quindi ciò che si verifica è il comportamento normale di un browser. Tuttavia puoi sovrascriverlo con la direttiva CSS a capo automatico.

Dovresti impostare una larghezza sulla tabella generale, quindi una larghezza sulle colonne. "larghezza: 100%;" dovrebbe anche essere OK a seconda delle tue esigenze.

L'uso del ritorno a capo automatico potrebbe non essere quello che desideri, tuttavia è utile per mostrare tutti i dati senza deformare il layout.

Rendi il tavolo solido PRIMA del css. Calcola la larghezza della tabella, quindi utilizza una riga di "controllo" in cui ogni td ha una larghezza esplicita, che si somma alla larghezza nel tag della tabella.

Dover fare centinaia di e-mail html per funzionare ovunque, utilizzando prima l'HTML corretto, quindi lo styling w / css risolverà molti problemi in tutti IE, webkit e Mozilla.

così:

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

Manterrà un tavolo largo 300 px. Guarda le immagini che sono più grandi della larghezza per estremi

Puoi aggiungere un diva td, quindi modellarlo. Dovrebbe funzionare come previsto.

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

Quindi il css.

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

Puoi anche lavorare con "overflow: hidden" o "overflow-x: hidden" (solo per la larghezza). Ciò richiede una larghezza (e / o altezza?) Definita e forse anche un "display: block".

"Overflow: Hidden" nasconde l'intero contenuto, che non rientra nella casella definita.

Esempio:

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: Peccato per me, ho visto, usi già "overflow". Immagino che non funzioni, perché non imposti "display: block" sul tuo elemento ...

Proverei a impostarlo su max-width: 50px;

Puoi anche utilizzare percentuali e / o specificare nelle intestazioni delle colonne:

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

Il vantaggio con le percentuali è una minore manutenzione del codice: puoi modificare la larghezza della tabella senza dover specificare nuovamente la larghezza delle colonne.

Avvertenza: mi risulta che la larghezza della tabella specificata in pixel non sia supportata in HTML 5; devi invece usare i CSS.

Questo funziona per me

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