<tr> 's machen keine neuen Zeilen

Question

Aus irgendeinem Grund sind meine Tabellenzeilen nicht richtig verteilt, sondern nur neue Zeilen auf alten Zeilen überlagert. Anstelle einer 2-reihigen Tabelle habe ich etwas, das wie eine 1-reihige Tabelle aussieht, bei der 2 Reihen übereinander liegen. Hier ist der relevante Teil meines Code:

<table id="points-list-wrapper"> 
    <tr> 
     <td> 
      <p class="name">Test</p> 
      <p class="amount">597<img class="icon"src="icon.png"></img></p> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <p class="name">Another test!</p> 
      <p class="amount">0<img class="icon"src="icon.png"></img></p> 
     </td> 
    </tr> 
</table> 

Und die entsprechende CSS ...

#points-list-wrapper { 
    position:absolute; 
    margin-left:auto; 
    margin-right:auto; 
    top:20%; 
    left:0; 
    right:0; 
    bottom:0; 
    height:auto; 
    width:50%; 
    border:5px solid white; 
} 
td { 
    height:100px; 
} 
tr { 
    height:100px; 
} 

Und das Endergebnis ist, dass die Tabellenzeilen überlappen, als ob sie position:absolute waren.

Die Tabelle selbst ist absolut positioniert, aber das sollte die Zeilen darin nicht beeinflussen, richtig? Was vermisse ich hier.

Vielen Dank im Voraus.

Answer 1

Sie positionieren absolut alles in Ihren Tabellenzellen. Absolute Positionierung funktioniert von der nächsten relative positionierten Vorfahren.

ändern .td zu:

td { 
    height: 100px; 
    position:relative; 
} 

https://jsfiddle.net/hdsbgsu9/1/

Grundstellung Tutorial: http://learnlayout.com/position.html

Stellen Sie sicher, alle anderen ungültige HTML-Probleme zu beheben.