Fai un DIV riempire un'intera cella della tabella

Ho visto questa domanda e ho cercato su Google un po ' , ma finora niente ha funzionato. Immagino sia il 2010 ora (quelle domande / risposte sono vecchie e, beh, senza risposta) e abbiamo CSS3! Esiste un modo per ottenere un div per riempire la larghezza e l'altezza di un'intera cella della tabella utilizzando CSS?

Non so quale sarà la larghezza e / o l'altezza della cella in anticipo e l'impostazione della larghezza e dell'altezza del div al 100% non funziona.

Inoltre, il motivo per cui ho bisogno del div è perché devo assolutamente posizionare alcuni elementi al di fuori della cella e position: relativenon si applica a tds, quindi ho bisogno di un div wrapper.

Il seguente codice funziona su IE 8, modalità di compatibilità IE 7 di IE 8 e Chrome (non testato altrove):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

Hai detto che nella tua domanda originale che l'impostazione widthe heightper 100%non ha funzionato, però, che mi fa sospettare che ci sia qualche altra regola l'override di esso. Hai controllato lo stile calcolato in Chrome o Firebug per vedere se le regole di larghezza / altezza venivano davvero applicate?

modificare

Quanto sono sciocco! Il divdimensionamento era al testo, non al td. Puoi risolverlo su Chrome creando div display:inline-block, ma non funziona su IE. Questo si sta rivelando più complicato ...

div height = 100% nella cella della tabella funzionerà solo quando la tabella ha l'attributo height stesso.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

UPD in FireFox dovresti anche impostare il height=100%valore TDsull'elemento genitore

Ho dovuto impostare un'altezza finta in altezza <tr>e: ereditare per<td>s

tr ha height: 1px(viene ignorato comunque)

Quindi impostare il td height: inherit

Quindi impostare il div su height: 100%

Questo ha funzionato per me in IE edge e Chrome:

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

Se il motivo per cui si desidera un div al 100% all'interno di una cella di una tabella è quello di essere in grado di estendere il colore di sfondo a tutta l'altezza ma di avere ancora una spaziatura tra le celle, è possibile assegnare a <td>se stesso il colore di sfondo e utilizzare il CSS proprietà di spaziatura dei bordi per creare il margine tra le celle.

Se hai davvero bisogno di un div dell'altezza del 100%, tuttavia, come altri hanno già detto, devi assegnare un'altezza fissa al <table>o utilizzare Javascript.

Quindi, poiché tutti pubblicano la loro soluzione e nessuno è andato bene per me, ecco il mio (testato su Chrome e Firefox).

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

Fiddle: https://jsfiddle.net/nh6g5fzv/

Poiché tutti gli altri browser (compresi IE 7, 8 e 9) gestiscono position:relativecorrettamente una cella della tabella e solo Firefox ha sbagliato, la soluzione migliore è utilizzare uno shim JavaScript. Non dovresti modificare il DOM per un browser non funzionante. Le persone usano spessori continuamente quando IE sbaglia qualcosa e tutti gli altri browser lo fanno bene.

Ecco uno snippet con tutto il codice annotato. Nel mio esempio JavaScript, HTML e CSS usano pratiche di progettazione web reattive, ma non è necessario se non si desidera. (Responsive significa che si adatta alla larghezza del browser.)

http://jsfiddle.net/mrbinky3000/MfWuV/33/

Ecco il codice stesso, ma non ha senso senza il contesto, quindi visita l'URL jsfiddle sopra. (Lo snippet completo ha anche molti commenti sia nel CSS che nel Javascript.)

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

Propongo una soluzione usando lo sperimentale Flexbox per simulare un layout di tabella che consentirà all'elemento di contenuto di una cella di riempire verticalmente la sua cella madre:

dimostrazione

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

dopo diversi giorni di ricerche ho scoperto una possibile soluzione per questo problema.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

Lingua spagnola: El Truco è stabilito la Tabla, il TR y il TD un'altezza: 100%. Esto lo hace compatibile con FireFox y Chrome. Internet Explorer ignora eso, per quanto riguarda l'etiqueta TD como block. Da questo Explorer Explorer è presente la altura máxima.

Spiegazione inglese: nei commenti al codice

se <table> <tr> <td> <div>tutti hanno height: 100%;impostato, il div riempirà l'altezza dinamica della cella in tutti i browser.

Ok nessuno lo ha menzionato, quindi ho pensato di pubblicare questo trucco:

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

overflow: auto su quel div contenitore all'interno della cella fa il trucco per me. Senza di essa il div non usa l'intera altezza.

Se la cella della tabella ha le dimensioni che desideri, aggiungi questa classe css e assegnala al tuo div:

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

Se si desidera che anche la cella della tabella riempia il genitore, assegnare anche la classe alla cella della tabella. Spero possa essere d'aiuto.

un po 'in ritardo alla festa ma ecco la mia soluzione:

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

Dato che non ho abbastanza reputazione per pubblicare un commento, voglio aggiungere una soluzione cross-browser completa che combini gli approcci di @Madeorsk e @ Saadat con qualche leggera modifica! (Testato su Chrome, Firefox, Safari, IE e Edge dal 2/10/2020)

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

Tuttavia, se sei come me, allora vuoi controllare anche l'allineamento verticale, e in quei casi, mi piace usare flexbox:

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

Penso che la soluzione migliore sarebbe usare JavaScript.

Ma non sono sicuro che tu debba farlo per risolvere il tuo problema di posizionamento degli elementi <td>all'esterno della cella. Per questo potresti fare qualcosa del genere:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

Non in linea ovviamente, ma con classi e ID.

Per rendere l'altezza: 100% di lavoro per il div interno, devi impostare un'altezza per il genitore td. Nel mio caso particolare ha funzionato usando l'altezza: 100%. Ciò ha allungato l'altezza del div interno, mentre gli altri elementi del tavolo non hanno permesso alla td di diventare troppo grande. Ovviamente puoi usare valori diversi dal 100%

Se vuoi anche fare in modo che la cella della tabella abbia un'altezza fissa in modo che non si ingrandisca in base al contenuto (per far scorrere il div interno o nascondere l'overflow), cioè quando non hai scelta ma fai alcuni trucchi js. Il genitore td dovrà avere l'altezza specificata in un'unità non relativa (non%). E molto probabilmente non avrai altra scelta che calcolare quell'altezza usando js. Ciò richiederebbe anche il layout della tabella: set di stili fissi per l'elemento table

Incontro spesso problemi simili e uso sempre solo table-layout: fixed;l' tableelemento e height: 100%;il div interno.

Alla fine non ho trovato nulla che potesse funzionare su tutti i miei browser e tutte le modalità di rendering di DocTypes / browser, ad eccezione dell'utilizzo di jQuery. Quindi ecco cosa mi è venuto in mente.
Prende anche in considerazione il rowpan.

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

Testato in IE11 (modalità Edge), FF42, Chrome44 +. Non testato con tabelle nidificate.

puoi farlo così:

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

Se l'elemento posizionato e il suo elemento padre non hanno larghezza e altezza, impostare

padding: 0;

nel suo elemento padre,

Questo probabilmente non è raccomandato.

Ho trovato una soluzione alternativa che funziona se il tuo div non contiene testo e ha uno sfondo uniforme.

display: 'list-item'

fornisce al div l'altezza e la larghezza desiderate, ma con il grande svantaggio di avere un punto elenco elenco. Poiché il div ha un colore di sfondo omogeneo, mi sono sbarazzato del proiettile con quegli stili:

list-style-position: 'inside',
color: *background-color*,

Non sono sicuro di cosa tu voglia fare ma potresti provare questo:

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

Quanto segue dovrebbe funzionare. Devi impostare un'altezza per la cella padre. https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

Prova questo:

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

Prova a mettere display: blocco tabella all'interno di una cella

Non guardo qui un vecchio trucco CSS per < div > dentro < td >. Quindi ricordo: basta impostare un valore minimo per la larghezza , ma cosa serve per la larghezza minima . Per esempio:

<div style="width: 3px; min-width: 99%;">

La larghezza della td , in quel caso, dipende da te.

Questa è la mia soluzione per estendere il 100% di altezza e il 100% di larghezza in un html <td>

se elimini la prima riga del codice, puoi correggerla ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

perché questo tipo di documento non consente in alcuni file di utilizzare il 100% all'interno di <td>, ma se si elimina questa riga, il corpo non riesce ad espandere lo sfondo al 100% di altezza e 100% di larghezza, quindi ho trovato questo DOCTYPEche risolve il problema

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

questo DOCTYPE ti consente di estendere lo sfondo del tuo corpo con un'altezza del 100% e una larghezza del 100% e ti consente di portare tutta l'altezza del 100% e la larghezza del 100% nella <td>