Le larghezze delle colonne della tabella di forza devono essere sempre fisse indipendentemente dal contenuto

Question

Ho una tabella html con table-layout: fixed e un td con una larghezza impostata. La colonna si espande ancora per contenere il contenuto del testo che non contiene uno spazio. C'è un modo per risolvere questo diverso dal wrapping del 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, si può vedere che la colonna con AAAAAAAAAAAA ... si espande nonostante sia impostato in modo esplicito a 50px di larghezza.

Answer 1

Specificare la larghezza della tabella:

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

Vedi jsFiddle

Answer 2

Proverei a impostarlo su max-width: 50px;

Answer 3

Fai roccia tavolo solido prima del css. Calcola la larghezza della tabella, quindi utilizza una riga 'controllante' in cui ogni td ha una larghezza esplicita, che si sommano alla larghezza nel tag della tabella.

Dovendo fare centinaia di e-mail html per funzionare ovunque, utilizzando prima l'HTML corretto, lo stile w/css funzionerà su molti problemi in tutti gli IE, webkit e mozillas.

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> 

intende esercitare un tavolo a 300px di larghezza. Guarda le immagini che sono più grandi rispetto alla larghezza da estremi

Answer 4

Prova a guardare nella seguente CSS:

word-wrap:break-word; 

browser Web non dovrebbero break-up "parole" per impostazione predefinita in modo da ciò che si sta verificando è un comportamento normale di un browser. Tuttavia è possibile sovrascriverlo con la direttiva CSS a capo di parole.

È necessario impostare una larghezza sulla tabella generale e una larghezza sulle colonne. "Width: 100%;" dovrebbe anche essere OK a seconda delle vostre esigenze.

L'utilizzo del word-wrap potrebbe non essere quello che vuoi, tuttavia è utile per mostrare tutti i dati senza deformare il layout.

Answer 5

È possibile aggiungere unoallo td, quindi modificarlo. Dovrebbe funzionare come previsto.

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

Quindi il css.

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

Answer 6

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

"Overflow: Hidden" nasconde l'intero contenuto, che non si adatta alla 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: Vergogna su di me, ho visto, è al pronto all'uso "overflow". Suppongo che non funzioni, perché non si imposta "display: block" sul proprio elemento ...