CSS della tabella RowSpan con Fluid Altezza

Sto cercando di realizzare quanto segue usando i CSS:CSS della tabella RowSpan con Fluid Altezza

<table border="1" width="300px"> 
<tr> 
    <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td> 
    <td>Here is some sample text. And some additional sample text.</td> 
</tr> 
<tr> 
    <td>Here is some sample text. And some additional sample text.</td> 
</tr> 
</table>

alt text

Gli esempi che ho visto per la realizzazione di questo utilizzare altezze fisse o consentire il contenuto per avvolgere la colonna di sinistra. C'è un modo elegante per farlo usando i CSS?

fonte

2010-04-09 Gabe Sumner

Prima di tutto, quello che stai facendo sembra un tavolo per me, quindi potresti volerlo considerare. Tuttavia, farlo con i CSS è un po 'più complicato (a meno che non si faccia lo stile della tabella nei CSS). Il seguente codice funziona, ma non centrare verticalmente il testo nella casella:

<html><head><title>Test2</title></head><body> 
<div style="width:300px; padding: 2px; border: 1px solid black;"> 
    <div style="float:right; width: 100px;"> 
    <div style="border: 1px solid black; margin-bottom: 2px;"> 
     Here is some sample text. And some additional sample text. 
    </div> 
    <div style="border: 1px solid black;"> 
     Here is some sample text. And some additional sample text. 
    </div> 
    </div> 
    <div style="border: 1px solid black; margin-right: 102px;"> 
    <div> 
     This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right. 
    </div> 
    <div style="clear: right; margin-bottom: -1px;"></div> 
    </div> 
</div></body></html>

celle di tabella in CSS sono più facili:

<!DOCTYPE html> 
<html><head><title>Test2</title></head><body> 
<div style="display: table; width:300px; border: 1px solid black; border-spacing: 2px;"> 
    <div style="display: table-cell; border: 1px solid black; vertical-align: middle;"> 
    This column should equal the height (no fixed-height allowed) of the 2 rows sitting to the right. 
    </div> 
    <div style="display: table-cell; width: 100px;"> 
    <div style="border: 1px solid black; margin-bottom: 2px;"> 
     Here is some sample text. And some additional sample text. 
    </div> 
    <div style="border: 1px solid black;"> 
     Here is some sample text. And some additional sample text. 
    </div> 
    </div> 
</div> 
</body> 
</html>

fonte

2010-04-09 22:50:36

Questo è abbastanza vicino. Ho notato, per il tuo esempio, che quando la colonna di sinistra contiene più testo rispetto alle 2 colonne di destra combinate, le colonne di destra non si espandono automaticamente per assorbire lo spazio extra. Questo comportamento esiste per le tabelle. In ogni caso, apprezzo la tua risposta. –

Hai ragione. Normalmente non è possibile rendere l'altezza del float dipendente da un altro valore. Disegnare le cose come tabella potrebbe essere la soluzione migliore che dovrebbe avere ancora i vantaggi di non usare una tabella html. L'unico problema è che non funziona in IE <8. Potresti voler usare un foglio di stile condizionale per quello (solo supportato in IE) che fa qualcos'altro per IE. –

Questo è quello che uso: http://www.ejeliot.com/samples/equal-height-columns/example-7.html

mi basta usare la seconda colonna come un wrapper per gli altri due elementi (meno-semantica). Questo dovrebbe essere il modo più semplice.

fonte

2010-04-09 21:37:11

link dead link morto – Ash

avevo bisogno di qualcosa di molto simile. Purtroppo tutte queste soluzioni sono piuttosto complessa, mi è venuto con qualcosa di molto semplice (forse troppo semplice) - usato display: inline-block

HTML

<div> 
    <span id="v"> 
     text in the left 
    </span> 
    <div id="x"> 
     <div>upper row</div> 
     <div>lower row</div> 
    </div> 
</div>

CSS

#x { 
    display: inline-block; 
    vertical-align: middle; 
}

fiddle

fonte

2013-05-03 10:31:13 SummerBreeze

'v' e' x' sono * orribili * ID. – Dan

CSS della tabella RowSpan con Fluid Altezza

risposta

Problemi correlati