Faça um DIV preencher uma célula da tabela inteira

Eu já vi essa pergunta e pesquisei um pouco no Google , mas nada até agora funcionou. Eu acho que agora é 2010 (essas perguntas / respostas são antigas e, sem resposta) e temos CSS3! Existe alguma maneira de obter uma div para preencher a largura e a altura de uma célula de tabela inteira usando CSS?

Não sei qual será a largura e / ou a altura da célula antes do tempo, e definir a largura e a altura da div para 100% não funciona.

Além disso, o motivo pelo qual eu preciso da div é porque preciso posicionar absolutamente alguns elementos fora da célula e position: relativenão se aplica a tds, portanto, preciso de uma div de wrapper.

O código a seguir funciona no IE 8, no modo de compatibilidade IE 7 do IE 8 e no Chrome (não testado em outro lugar):

<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>

Você disse em sua pergunta original que a criação widthe heighta 100%fez não trabalho, porém, o que me faz suspeitar que há alguma outra regra substituindo-lo. Você verificou o estilo calculado no Chrome ou no Firebug para ver se as regras de largura / altura estavam realmente sendo aplicadas?

Editar

Como sou tola! O divtamanho estava no texto, não no td. Você pode corrigir isso no Chrome criando o div display:inline-block, mas ele não funciona no IE. Isso está se mostrando mais complicado ...

div height = 100% na célula da tabela funcionará apenas quando a tabela tiver o próprio atributo height.

<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 no FireFox, você também deve definir o height=100%valor para o TDelemento pai

Eu tive que definir uma altura falsa para a <tr>altura e: herdar para<td>s

tr tem height: 1px(é ignorado de qualquer maneira)

Em seguida, defina o td height: inherit

Em seguida, defina a div como height: 100%

Isso funcionou para mim no IE edge e no 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 o seu motivo para desejar uma div de 100% dentro de uma célula da tabela pudesse ser capaz de ter uma cor de plano de fundo estendida até a altura total, mas ainda ter espaço entre as células, você poderia dar a <td>si mesma a cor de plano de fundo e usar o CSS propriedade de espaçamento entre bordas para criar a margem entre as células.

Se você realmente precisa de uma div de 100% de altura, no entanto, como os outros aqui mencionaram, é necessário atribuir uma altura fixa ao <table>Javascript.

Então, como todo mundo está postando sua solução e nenhuma foi boa para mim, aqui está a minha (testada no Chrome e Firefox).

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

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

Como todos os outros navegadores (incluindo IE 7, 8 e 9) manipulam position:relativecorretamente uma célula da tabela e apenas o Firefox erra, sua melhor aposta é usar um calço de JavaScript. Você não precisa alterar seu DOM para um navegador com falha. As pessoas usam calços o tempo todo quando o IE comete algo errado e todos os outros navegadores fazem o certo.

Aqui está um trecho com todo o código anotado. O JavaScript, HTML e CSS usam práticas de design da web responsivas no meu exemplo, mas você não precisa se não quiser. (Responsivo significa que ele se adapta à largura do seu navegador.)

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

Aqui está o código em si, mas não faz sentido sem o contexto, então visite o URL do jsfiddle acima. (O snippet completo também possui muitos comentários no CSS e no 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();
    }
});

Proponho uma solução usando o experimental Flexbox para simular um layout de tabela que permitirá que o elemento de conteúdo de uma célula preencha verticalmente sua célula pai:

Demo

.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>

depois de vários dias pesquisando, descobri uma possível correção para esse 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>

Língua espanhola: O truco é estabelecido na Tabla, o TR e o TD uma altura: 100%. Ele é compatível com FireFox e Chrome. O Internet Explorer ignora isso, por que exibe a etiqueta TD como bloco. Dessa forma, o Explorer tem a altura máxima.

Explicação em inglês: dentro dos comentários do código

se <table> <tr> <td> <div>todos tiverem sido height: 100%;definidos, a div preencherá a altura dinâmica da célula em todos os navegadores.

Ok, ninguém mencionou isso, então eu pensei em postar esse truque:

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

estouro: auto nessa div contêiner dentro da célula faz o truque para mim. Sem ele, o div não usa toda a altura.

Se a célula da tabela tiver o tamanho desejado, adicione esta classe css e atribua-a à sua div:

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

Se você deseja que a célula da tabela preencha também o pai, atribua a classe à célula da tabela também. Espero que ajude.

um pouco atrasado para a festa, mas aqui está a minha solução:

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

Como não tenho reputação suficiente para postar um comentário, quero adicionar uma solução completa entre navegadores que combine as abordagens @Madeorsk e @ Saadat com algumas pequenas modificações! (Testado no Chrome, Firefox, Safari, IE e Edge em 10/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!
} 

No entanto, se você é como eu, também deseja controlar o alinhamento vertical e, nesses casos, eu gosto de usar o flexbox:

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

Eu acho que a melhor solução seria usar JavaScript.

Mas não tenho certeza de que você precise fazer isso para resolver seu problema de posicionamento de elementos na parte <td>externa da célula. Para isso, você poderia fazer algo assim:

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

Não em linha, é claro, mas com classes e identificações.

Para fazer a altura: 100% funcionar para a div interna, você deve definir uma altura para o pai td. Para o meu caso particular, funcionou usando a altura: 100%. Isso fez a altura interna da div esticar, enquanto os outros elementos da tabela não permitiram que o td ficasse muito grande. Obviamente, você pode usar outros valores além de 100%

Se você quiser também fazer com que a célula da tabela tenha uma altura fixa para que não fique maior com base no conteúdo (para fazer a div interna rolar ou ocultar o estouro), é quando você não tem escolha, mas faz alguns truques js. O pai td precisará ter a altura especificada em uma unidade não relativa (não%). E você provavelmente não terá escolha a não ser calcular essa altura usando js. Também seria necessário o layout da tabela: estilo fixo definido para o elemento da tabela

Encontro problemas semelhantes com frequência e sempre uso apenas table-layout: fixed;no tableelemento e height: 100%;na div interna.

No final, não encontrei nada que funcionasse em todos os meus navegadores e em todos os modos de renderização de documentos / documentos, exceto pelo uso do jQuery. Então aqui está o que eu criei.
Ele ainda leva em consideração o número de linhas.

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);

Testado no IE11 (modo Edge), FF42, Chrome44 +. Não testado com tabelas aninhadas.

você pode fazer assim:

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

Se o elemento posicionado e seu elemento pai não tiver largura e altura, defina

padding: 0;

em seu elemento pai,

Provavelmente isso não é recomendado.

Eu descobri uma solução alternativa que funciona se a sua div não contém texto e tem um plano de fundo uniforme.

display: 'list-item'

fornece à div a altura e a largura desejadas, mas com a grande desvantagem de ter um marcador de item de lista. Como a div tem uma cor de fundo homogênea, me livrei da bala com esses estilos:

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

Não tenho certeza do que você quer fazer, mas você pode tentar este:

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

O seguinte deve funcionar. Você precisa definir uma altura para a célula pai. 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>

Tente o seguinte:

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

Tente colocar display: bloco de tabela dentro de uma célula

Não assisto aqui um antigo truque de CSS para < div > dentro de < td >. Por isso, lembro: basta definir um valor mínimo para a largura , mas o que você precisa para a largura mínima . Por exemplo:

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

A largura do td , nesse caso, depende de você.

Esta é a minha solução para estender 100% de altura e 100% de largura em um html <td>

se você excluir a primeira linha do seu código, poderá corrigi-lo ...

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

porque esse doctype não permite em alguns arquivos usar 100% por cento dentro dele <td>, mas se você excluir esta linha, o corpo falhará ao expandir o plano de fundo para 100% de altura e 100% de largura, então descobri DOCTYPEque isso resolve o problema

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

esse DOCTYPE permite que você estenda o plano de fundo do seu corpo como 100% de altura e 100% de largura, e leve toda a 100% de altura e 100% de largura para o <td>