Structure de table hiérarchique indentée

J'essaie de créer un affichage hiérarchique des tables imbriquées, où chaque sous-niveau est plus éloigné du parent. Je suis ouvert à l'utilisation de table ou div. Le plus proche que je suis est ci-dessous. Il semble surtout correct dans IE (sauf que les bordures sur la droite sont écrasées ensemble). Dans Chrome, la bordure de l'élément secondaire s'étend au-delà du parent sur la droite.Structure de table hiérarchique indentée

Je suis également ouvert à l'utilisation de divs.

<html> 
<head> 
<style type="text/css"> 
.ItemTable 
{ 
    width: 100%; 
    margin-left: 20px; 
    border: solid 1px #dbdce3; 
} 
</style> 
</head> 
<body> 
    <table class="ItemTable"> 
     <tr> 
      <td>Item 1</td> 
     </tr> 
     <tr> 
      <td> 
       <table class="ItemTable"> 
        <tr> 
         <td>Item 1A</td> 
        </tr> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

Source

2009-04-24 Anonymous

Vous avez une étiquette de fermeture manquante –

changer

margin-left: 20px;

padding-left: 20px;

fonctionne pour moi sur IE7, Firefox et Chrome (bien qu'avec chrome je devais non agrandissez la fenêtre remaximise il - ressemble un bug de rendu à moi)

Source

2009-04-24 15:09:17

On dirait un couple de choses. Votre sous table était manquant, il est balise fermante et j'ajouté padding au TD pour aider le tiret:

<style type="text/css"> 
    .ItemTable 
    { 
     width: 100%; 

     border: solid 1px #dbdce3; 
    } 
    .ItemTable td 
    { 
     width: auto; 
     padding-left: 20px; 
     border: solid 1px #dbdce3; 
    } 
</style> 


<table class="ItemTable"> 
    <tr> 
     <td> 
      Item 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table class="ItemTable"> 
       <tr> 
        <td> 
         Item 1A 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table>

Testés dans Chrome, FF, IE6, IE7 et Safari et il semble que cela fonctionne.

Source

2009-04-24 15:12:17 CodeLikeBeaker

Avez-vous l'intention d'afficher des données tabulaires? Sinon, vous seriez mieux utiliser simplement div est pour cela et simplement l'application d'une marge à l'élément enfant comme indiqué ci-dessous

<style> 
    #container {border:1px solid #999} 
    .indent {margin-left:50px; border:1px solid #999;} 
    .item {background:#99cc00;} 
</style> 

<div id="container"> 
    <span class="item">This is item 1</span> 

    <div class="indent"> 
     <span class="item">This is item 2</span> 

     <div class="indent"> 
      <span class="item">This is item 3</span> 
     </div> 

    </div> 

</div>

Bien sûr, cela dépend vraiment de ce que vous essayez d'afficher.

Source

2009-04-25 19:51:36 Phunky

Structure de table hiérarchique indentée

Répondre

Questions connexes