Faire en sorte qu'un DIV remplisse une cellule entière du tableau

Question

J'ai vu cette question y j'ai fait quelques recherches sur Internet mais rien n'a fonctionné jusqu'à présent. Je me dis que nous sommes en 2010 (ces questions/réponses sont vieilles et, en fait, sans réponse) et que nous avons CSS3 ! Existe-t-il un moyen de faire en sorte qu'une division occupe toute la largeur et la hauteur d'une cellule de tableau à l'aide de CSS ?

Je ne sais pas à l'avance quelle sera la largeur et/ou la hauteur de la cellule, et le fait de fixer la largeur et la hauteur de la division à 100 % ne fonctionne pas.

De plus, la raison pour laquelle j'ai besoin du div est que je dois positionner absolument certains éléments en dehors de la cellule, et position: relative ne s'applique pas à td et j'ai donc besoin d'un div enveloppant.

Answer 1

Div height=100% dans une cellule de tableau ne fonctionnera que si le tableau a lui-même un attribut de hauteur.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td style="height: 100%">
     <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 dans FireFox, vous devez également définir height=100% au parent TD élément

Answer 2

Le code suivant fonctionne sur IE 8, le mode de compatibilité IE 7 d'IE 8, et Chrome (non testé ailleurs) :

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

Vous avez dit dans votre question initiale que le réglage width y height à 100% n'a pas fonctionné, ce qui me fait penser qu'il existe une autre règle qui la remplace. Avez-vous vérifié le style calculé dans Chrome ou Firebug pour voir si les règles de largeur/hauteur étaient réellement appliquées ?

Modifier

Comme je suis stupide ! The div s'adaptait au texte, et non à l'écran de l'ordinateur. td . Vous pouvez résoudre ce problème dans Chrome en faisant en sorte que l'option div display:inline-block mais cela ne fonctionne pas sur IE. Cela s'avère plus délicat...

Answer 3

Si la raison pour laquelle vous souhaitez avoir un div 100% à l'intérieur d'une cellule de tableau est de permettre à une couleur d'arrière-plan de s'étendre sur toute la hauteur tout en conservant un espacement entre les cellules, vous pouvez donner à la balise <td> lui-même la couleur de fond et utiliser la propriété CSS border-spacing pour créer la marge entre les cellules.

Toutefois, si vous avez vraiment besoin d'une div d'une hauteur de 100 %, comme d'autres l'ont mentionné ici, vous devez soit attribuer une hauteur fixe à l'attribut <table> ou utiliser Javascript.

Answer 4

Étant donné que tous les autres navigateurs (y compris IE 7, 8 et 9) gèrent position:relative sur une cellule de tableau correctement et seulement Firefox se trompe, votre meilleure chance est d'utiliser une cale JavaScript. Vous ne devriez pas avoir à modifier votre DOM pour un navigateur défaillant. Les gens utilisent des cales tout le temps quand IE se trompe et que tous les autres navigateurs s'en sortent bien.

Voici un extrait avec tout le code annoté. Dans mon exemple, le JavaScript, le HTML et le CSS utilisent les pratiques de conception Web réactive, mais vous n'êtes pas obligé de le faire si vous ne le souhaitez pas. (Responsive signifie qu'il s'adapte à la largeur de votre navigateur).

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

Voici le code lui-même, mais il n'a pas de sens sans le contexte, alors visitez l'URL jsfiddle ci-dessus. (L'extrait complet comporte également de nombreux commentaires à la fois dans le CSS et le 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();
    }
});

Answer 5

Après plusieurs jours de recherche, j'ai trouvé une solution possible à ce problème.

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

Langue anglaise : L'astuce consiste à définir le tableau, le TR et le TD sur height:100%. Cela le rend compatible avec FireFox et Chrome. Internet Explorer n'en tient pas compte, c'est pourquoi la balise TD doit être bloquée. De cette façon, Explorer prend la hauteur maximale.

Explication en anglais : dans les commentaires du code