td widths, non funziona?

Così ho questo codice qui:td widths, non funziona?

<table> 
    <tr> 
     <td width="200px" valign="top"> 
      <div class="left_menu"> 
       <div class="menu_item"> 
        <a href="#">Home</a> 
       </div> 
      </div> 
     </td> 
     <td width="1000px" valign="top">Content</td> 
    </tr> 
</table>

con il CSS

.left_menu { 
    background: none repeat scroll 0 0 #333333; 
    border-radius: 5px 5px 5px 5px; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 5px; 
} 

.menu_item { 
    background: none repeat scroll 0 0 #CCCCCC; 
    border-bottom: 1px solid #999999; 
    border-radius: 5px 5px 5px 5px; 
    border-top: 1px solid #FFFFCC; 
    cursor: pointer; 
    padding: 5px; 
}

Funziona bene con il mio browser e ho provato in tutti i browser Mac e PC, ma qualcuno si lamenta che lo td con lo width di 200 continua a cambiare larghezza. Non ho idea di cosa stia parlando. Qualcuno sa perché lui o lei sta vedendo il cambio di larghezza sul td?

fonte

2012-06-18 user979331

Quindi, come possiamo aiutare quando abbiamo ancora meno un'idea di ciò che la denuncia è di circa? Non possiamo nemmeno testare la pagina reale e non abbiamo informazioni su qualcuno e sul suo ambiente di navigazione. –

dovrebbe essere:

<td width="200">

<td style="width: 200px">

Nota che se il tuo cellulare contiene alcuni contenuti che non rientra nella 200px (come somelongwordwithoutanyspaces), la cellula si estenderà comunque, a meno che il tuo CSS non contenga table-layout: fixed per la tabella.

EDIT

Come Kristina bambino annotato sulla sua risposta, si dovrebbe evitare sia l'attributo width e l'utilizzo di CSS in linea (con l'attributo style). È una buona pratica separare lo stile e la struttura il più possibile.

fonte

2012-06-18 20:28:56 bfavaretto

Grazie bfavaretto ... provando quello ora – user979331

+28

se la tabella fosse '

' – user979331

@ user1193385, Sì, è tutto. Ma evita di usare i css in linea se possibile. – bfavaretto

Non è possibile specificare le unità negli attributi width/height di una tabella; questi sono sempre in pixel, ma non dovresti usarli affatto poiché sono deprecati.

fonte

2012-06-18 20:29:18 lanzz

Larghezza e/o altezza in tabelle non sono più standard; come dice Ianzz, sono deprecati. Invece il modo migliore per farlo è quello di avere un elemento di blocco all'interno della vostra cella di una tabella che conterrà la cella aperta alla vostra dimensione desiderata:

<table> 
    <tr> 
     <td valign="top"> 
      <div class="left_menu"> 
       <div class="menu_item"> 
        <a href="#">Home</a> 
       </div> 
      </div> 
     </td> 
     <td valign="top" class="content">Content</td> 
    </tr> 
</table>

CSS

.content { 
    width: 1000px; 
} 

.left_menu { 
    background: none repeat scroll 0 0 #333333; 
    border-radius: 5px 5px 5px 5px; 
    font-family: Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 5px; 
    width: 200px; 
} 

.menu_item { 
    background: none repeat scroll 0 0 #CCCCCC; 
    border-bottom: 1px solid #999999; 
    border-radius: 5px 5px 5px 5px; 
    border-top: 1px solid #FFFFCC; 
    cursor: pointer; 
    padding: 5px; 
}

fonte

2012-06-18 20:43:52

Sfortunatamente, la tecnologia di posta elettronica è di molti anni indietro rispetto all'attuale specifica HTML, e in tal caso, le tabelle e i CSS in linea sono purtroppo, inevitabili. – MikeTheLiar

Nessuno parlava di email html, questo era per la navigazione web di base sul desktop. Ma sì, per le e-mail le tabelle e i css in linea sono l'unico modo per costruirle. Grazie, Microsoft ... –

invio solo email perché è quello che mi ha portato qui; Stavo avendo lo stesso problema con la posta elettronica. – MikeTheLiar

tenta di utilizzare

word-wrap: break-word;

sperare questo aiuto

fonte

2012-12-30 17:39:27 Med7at

Si noti che la regolazione della larghezza di una colonna nel thead influenzerà t egli intera tabella

<table> 
    <thead> 
     <tr width="25"> 
      <th>Name</th> 
      <th>Email</th> 
     </tr> 
    </thead> 
    <tr> 
     <td>Joe</td> 
     <td>[email protected]</td> 
    </tr> 
</table>

Nel mio caso, la larghezza del thead> tr è stato ignorando la larghezza sul tavolo> tr> td direttamente.

fonte

2014-03-28 05:44:10

<table style="table-layout:fixed;">

Questo forzerà la larghezza in stile <td>. Se il testo lo sovrascrive, si sovrapporrà all'altro testo <td>. Quindi prova a utilizzare le query multimediali.

fonte

2016-07-28 15:08:40 mateostabio

Nel mio caso d'uso, questo era importante quanto la risposta di bfavaretto – brasofilo

provare questo: