Table HTML pour chevaucher la div parent

Comment faire pour que la table interne chevauche la div parent avec 5 px lors du redimensionnement?Table HTML pour chevaucher la div parent

ma solution actuelle:

<div id="crop"> 
    <table style="width:105%; height:105%;"> 
    //table cells 
    </table> 
</div>

problème

est qu'il devient plus petit lors du redimensionnement ...

comment puis-je faire chevaucher constamment avec 5px;

Source

2008-12-05 Anonymous

Le folling semble fonctionner très bien dans FF3, Chrome et IE7. Bien que l'utilisation d'expressions dans les styles CSS pour IE ne soit pas idéale.

Vous devriez voir que lors du rendu, le div "externe" bleu est affiché dans le div "interne". Le div "interne" sera rouge pour les navigateurs autres que IE où il sera vert à la place.

Notez également que, dans cet exemple, j'ai dû soustraire 2px de la hauteur du div "inner" pour ajuster les bordures supérieure et inférieure.

<html> 
    <head> 
     <style type="text/css"> 
      #outer { 
       position: relative; 
       border: solid 1px blue; 
       height: 100px; 
      } 
      #inner { 
       position: absolute; 
       border: solid 1px red; 
       top: -5px; 
       left: -5px; 
       bottom: -5px; 
       right: -5px; 
      } 
     </style> 
     <!--[if IE]> 
     <style type="text/css"> 
      #inner { 
       border: solid 1px green; 
       height: 108px; 
       width: expression(document.getElementById("outer").clientWidth + 10); 
      } 
     </style> 
     <![endif]--> 
    </head> 
    <body> 
     <table width="100%"> 
      <colgroup> 
       <col /> 
       <col width="100" /> 
       <col width="200" /> 
      </colgroup> 
      <tr> 
       <td> 
        <div id="outer"> 
         <div id="inner"> 
          <table border="1"> 
           <tr><td>A</td><td>B</td></tr> 
           <tr><td>C</td><td>D</td></tr> 
          </table> 
         </div> 
        </div> 
       </td> 
       <td>Alpha</td> 
       <td>Beta</td> 
      </tr> 
      <tr> 
       <td>One</td> 
       <td>Two</td> 
       <td>Three</td> 
      </tr> 
     </table> 
    </body> 
</html>

Source

2008-12-05 15:22:52 BlackMael

Avez-vous essayé ce qui suit:

table { 
position: relative; 
top: 5px; 
left: 5px; 
margin-top: -5px; 
margin-left: -5px; 
}

Ce tableau chevauche la div avec 5px au côté droit et au fond. Les marges sont ajoutées pour que la table remplisse le côté gauche et le haut. Il suffit d'omettre les marges si vous voulez que la table entière soit décalée. Vous devrez probablement ajouter du style à la div ou au contenu au-dessus de la table, pour empêcher la div de s'effondrer.

Voici un exemple complet:

<style type="text/css"> 
#container { 
background-color: red; //color added for illustration 
} 

#data { 
background-color: blue; //color added for illustration 
position: relative; 
top: 5px; 
left: 5px; 
margin-top: -5px; 
margin-left: -5px; 
} 
</style> 

<!-- ... --> 

<div id="container"> 
some text to make the div visible at the top 
<table id="data"> 
<!-- rows --> 
</table> 
</div>

Source

2008-12-05 11:01:44 chriscena

En bref:

Collez le table dans un autre div et définir la largeur de table à 100%
font que div faire le déplacement autour en définissant son positionnement sur absolu (assurez-vous que le parent a relatif) et définissez sa largeur à 100%.
Utilisez les marges négatives sur le nouveau div pour le retirer avec précision de 5px.

Il est un peu compliqué, mais vous aurez certainement besoin des marges négatives et vous aurez probablement besoin du position:absolute pour avoir chevauchement ...

Source

2008-12-05 11:02:46 Oli

Table HTML pour chevaucher la div parent

Répondre

Questions connexes