html - <tr >'s aren' t 创建新行

Question

出于某种原因，我的表格行间距不正确，只是将新行覆盖在旧行上。我得到的不是 2 行表，而是 1 行表，其中 2 行相互重叠。这是我的代码的相关部分:

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

以及相关的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;
}

最终结果是表行重叠，就好像它们是 position:absolute 一样。

表格本身是绝对定位的，但这不应该影响其中的行，对吧？我在这里错过了什么。

提前致谢。

Answer 1

您绝对将所有内容定位在表格单元格中。最近的 relative 定位祖先的绝对定位。

将 .td 更改为:

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

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

基本位置教程:http://learnlayout.com/position.html

确保修复所有其他无效的 html 问题。