Impostazione della larghezza della colonna della tabella

Ho una tabella semplice che viene utilizzata per una casella di posta come segue:

Come posso impostare la larghezza in modo che Da e Data siano il 15% della larghezza della pagina e che l’Oggetto sia 70%. Voglio anche che la tabella occupi l’intera larghezza della pagina.

 
From Subject Date
15% 70% 15%

HTML:

 
From Subject Date
[from] [subject] [date]

CSS:

 table { width: 100%; border: 1px solid #000; } th.from, th.date { width: 15% } th.subject { width: 70%; /* Not necessary, since only 70% width remains */ } 

La migliore pratica consiste nel tenere separati HTML e CSS per una minore duplicazione del codice e per la separazione delle preoccupazioni (HTML per struttura e semantica e CSS per la presentazione).

Tieni presente che, affinché funzioni nelle versioni precedenti di Internet Explorer, potresti dover assegnare alla tabella una larghezza specifica (ad es. 900px). Quel browser ha qualche problema nel rendering di un elemento con quote percentuali se il suo wrapper non ha dimensioni esatte.

Usa il CSS qui sotto, la prima dichiarazione assicurerà che la tua tabella si attenga alle larghezze fornite (dovrai aggiungere le classi nel tuo HTML):

 table{ table-layout:fixed; } th.from, th.date { width: 15%; } th.subject{ width: 70%; } 

Modo alternativo con una sola class mantenendo i tuoi stili in un file CSS, che funziona anche in IE7:

 
From Subject Date

Più di recente, puoi anche usare il selettore nth-child() da CSS3 (IE9 +), dove devi semplicemente inserire il nr. della rispettiva colonna nella parentesi invece di metterle insieme con il selettore adiacente. Ad esempio, ad esempio:

  

A seconda del tuo corpo (o del div che avvolge il tuo tavolo) “impostazioni” dovresti essere in grado di farlo:

 body { width: 98%; } table { width: 100%; } th { border: 1px solid black; } th.From, th.Date { width: 15%; } th.Date { width: 70%; } 
From Subject Date
Me Your question 5/30/2009 2:41:40 AM UTC

dimostrazione

Questi sono i miei due suggerimenti.

  1. Usando le classi Non è necessario specificare la larghezza delle altre due colonne poiché verranno impostate automaticamente al 15% ciascuna dal browser.

      table { table-layout: fixed; } .subject { width: 70%; } 
      
    From Subject Date
 
Month Savings
January $100
February $80

dimostrazione

Non usare l’attributo border, usa il CSS per tutte le tue esigenze di styling.

  ... rest of the table code... 
From Subject Date

Ma incorporare i CSS in questo modo è una pratica sbagliata – si dovrebbero invece usare le classi CSS e inserire le regole CSS in un file CSS esterno.

Prova questo invece.

 
column 1 column 2 column 3
value 1 value 2 value 3

Ecco un altro modo minimale di farlo in CSS che funziona anche con i browser meno recenti che non supportano :nth-child e simili selettori: http://jsfiddle.net/3wZWt/ .

HTML:

 
From Subject Date
Dmitriy Learning CSS 7/5/2014

CSS:

 table { border-collapse: collapse; width: 100%; } tr > * { border: 1px solid #000; } tr > th + th { width: 70%; } tr > th + th + th { width: 15%; } 
  table { table-layout: fixed; } .subject { width: 70%; } 
  
From Subject Date