Eingerückte hierarchische Tabellenstruktur

Ich versuche, eine hierarchische Anzeige von verschachtelten Tabellen zu erstellen, wobei jede Unterebene weiter vom übergeordneten eingerückt ist. Ich bin offen für die Verwendung von Tabelle oder Div. Der nächste, dem ich gekommen bin, ist unten. Im IE sieht es größtenteils korrekt aus (außer dass die Ränder rechts zusammengemixt werden). In Chrome erstreckt sich der Unterelementrahmen über den übergeordneten Bereich hinaus.Eingerückte hierarchische Tabellenstruktur

Ich bin offen für die Verwendung von 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>

Quelle

2009-04-24 Anonymous

Sie haben einen schließenden Tag fehlt –

Ändern

margin-left: 20px;

padding-left: 20px;

Werke für mich auf IE7, Firefox und Chrome (obwohl mit Chrom ich hatte un-maximieren das Fenster remaximise es dann - sieht aus wie ein Rendering-Fehler für mich)

Quelle

2009-04-24 15:09:17

Sieht aus wie ein paar Dinge. Ihr Unter Tisch fehlte es in der Nähe Tag und ich hinzugefügt Polsterung an den TD mit dem Einzug zu helfen:

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

Getestet es in Chrome, FF, IE6, IE7 und Safari und es sieht aus wie es funktioniert.

Quelle

2009-04-24 15:12:17 CodeLikeBeaker

Möchten Sie Tabellendaten anzeigen? Wenn nicht würden Sie besser, nur divs dafür verwenden und nur eine Marge für das Kind Element Anwendung wie unten

gezeigt

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

Natürlich ist es hängt wirklich davon ab, was Sie anzeigen möchten.

Quelle

2009-04-25 19:51:36 Phunky

Eingerückte hierarchische Tabellenstruktur

Antwort

Verwandte Themen