Modo "standard" per ridurre la larghezza della colonna della tabella per adattarla all'elemento figlio

Ho una tabella con una larghezza nota, 776 pixel e tre colonne. La terza colonna ha una larghezza nota, 216 pixel, ma gli altri due non hanno larghezze note. Il comportamento che voglio è che la seconda colonna abbia la stessa larghezza del suo elemento figlio. Qualunque sia la larghezza rimasta, 776 - 216 - 2 °, sarebbe la larghezza per la prima colonna.Modo "standard" per ridurre la larghezza della colonna della tabella per adattarla all'elemento figlio

Ho trovato un esempio che imposta la larghezza della colonna che dovrebbe avere la larghezza ridotta a 1 pixel. Sembra funzionare, ma sembra che sia un trucco e non capisco perché funzioni. Esiste un modo più "standard" per ottenere lo stesso risultato?

Ecco il mio HTML con CSS in linea come un esempio:

<table style="width:776px; height:48px;"> 
    <tr> 
     <td style="height:48px;"> 
      <!-- Note: Setting font size to zero prevents white space from contributing to an inline block element's width --> 
      <div style="background:#f0f0f0; border:solid 2px #808080; font-size:0; margin-left:8px; text-align:center;"> 
       <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Art</h3></a> 
       <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Events</h3></a> 
       <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Papers</h3></a> 
       <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Research</h3></a> 
      </div> 
     </td> 
     <!-- Note: Setting width to one pixel removes horizontal spacing --> 
     <td style="vertical-align:middle; width:1px; height:48px;"> 
      <h3 style="margin-left:8px;"><label for="search">Search:</label></h3> 
     </td> 
     <td style="vertical-align:middle; width:216px; height:48px;"> 
      <input id="search" style="margin-left:8px; width:208px;" type="text" value="" maxlength="32"> 
     </td> 
    </tr> 
</table>

fonte

2014-09-17 asimes

Non utilizzare le tabelle per il layout sarebbe il mio primo commento. –

Nel modello di tabella CSS, solo l'algoritmo di layout di tabella fissa è ben definito. L'algoritmo di layout di tabella automatico predefinito dipende dall'implementazione e non è standardizzato, sebbene la maggior parte dei browser lo implementino in modo simile, ma potrebbero esserci delle differenze. Vedi [sezione 17.5.2] (http://www.w3.org/TR/CSS21/tables.html#width-layout) della specifica. Nota che questo è vero indipendentemente dal fatto che tu usi un effettivo elemento '

' o usi altri tipi di elementi con 'display: table' et al. – BoltClock

In base al modo in cui la pagina è strutturata, le colonne della tabella ci porteranno al resto dello spazio lasciato dal terzo, assumendo che si usi la proprietà display corretta su child elents (in genere table-cell o block work). Oltre a ciò, sono d'accordo con @Paulie_D –

risposta

ho trovato il motivo per cui di questo lavoro nel collegamento BoltClocks (nei commenti) : http://www.w3.org/TR/CSS21/tables.html#auto-table-layout

... Questo algoritmo può essere inefficiente poiché richiede che l'agente utente abbia accesso a tutto il contenuto della tabella prima di determinare il layout finale e può richiedere più di un passaggio.

larghezze delle colonne sono determinate come segue:

calcolare la larghezza minima contenuto (MCW) di ciascuna cella: il contenuto formattato può comprendere qualsiasi numero di linee, ma non può fuoriuscire dalla scatola cella. Se la 'larghezza' (W) specificata della cella è maggiore di MCW, W è la larghezza minima della cella. Un valore di "auto" indica che MCW è la larghezza minima della cella ...

Risposta:
calcolare la larghezza contenuto minimo (MCW) di ogni cella: il contenuto formattato ... non può traboccare il riquadrato di cella.

fonte

2014-09-17 16:47:09 asimes

Beh, un modo semplice sarebbe quella di impostare la prima cella width: 100%. Questo lo costringerebbe a riempire quanto più può la larghezza della tabella genitore. Quindi, alla terza cella, inserisci un elemento di contenuto 216px (come un div).

La cella della tabella cerca sempre di rispettare il suo contenuto. In questo modo, il 2 ° div sarebbe squilibrato nel mezzo, rispettando solo il suo contenuto. Il terzo avrebbe rispettato il suo contenuto 216px, e il primo avrebbe riempito il resto.

Working JsFiddleExample

<table> 
    <tr> 
     <td>1stContent</td> <!-- Fills what it can --> 
     <td>2ndContent</td> <!-- Squized in the middle --> 
     <td> 
      <!-- Will respect the width of its content --> 
      <div class="dv3rd"> 
       216px 
      </div> 
     </td> 
    </tr> 
</table>

CSS:

table { 
    width: 776px; 
    background: silver; 
} 

td:nth-child(1) { 
    width: 100%; 
    background: red; 
} 

td:nth-child(2) { 
    background: green; 
} 

td:nth-child(3) { 
    background: blue; 
} 

.dv3rd { 
    width: 216px; 
}

Tuttavia

Così ha commentato, non si dovrebbe utilizzare le tabelle per il layout di pagina. Un semplice rimpiazzo funzionerebbe con le tabelle CSS, dove i div possono agire come display: table e display: table-cell elementi.

Ecco lo stesso esempio, ma utilizzando div è invece:

Working JsFiddleExample - Tableless

<div class="table"> 
    <div> 
     1stContent 
    </div> 
    <div> 
     2ndContent 
    </div> 
    <div> 
     <div class="dv3rd"> 
      216px 
     </div> 
    </div> 
</div>

CSS:

.table { 
    width: 776px; 
    background: silver; 
    display: table; 
} 

.table > div:nth-child(1) { 
    display: table-cell; 
    width: 100%; 
    background: red; 
} 

.table > div:nth-child(2) { 
    display: table-cell; 
    background: green; 
} 

.table > div:nth-child(3) { 
    display: table-cell; 
    background: blue; 
} 

.dv3rd { 
    width: 216px; 
}

fonte

2014-09-17 16:20:57 LcSalazar

A mio parere, questo è anche un trucco in entrambi i casi che funziona solo per qualche ragione come ** 100% + 216 + x> 100% **. Il mio hack funziona pure, quello che voglio sapere è o perché il mio hack funziona, perché il tuo hack funziona, o come farlo senza una soluzione hacky – asimes

@asimi, non sono sicuro di cosa intendi per * hack *. Una cella ha due comportamenti costanti: 1 - La somma delle celle riempirà sempre l'intera tabella. 2 - Una cella non sarà più piccola del suo contenuto. Sulla base di queste due premesse possiamo mettere insieme questo * hack *. – LcSalazar

Ah, non sapevo che quelle due regole fossero ufficiali, sarebbe stato logico che funzionassero allora. Guardando per vedere se questi esistono nel link di @ BoltClock – asimes

Problemi correlati