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

您绝对将所有内容都定位在表格单元格中。绝对定位适用于最近的<ItemTemplate> <asp:TextBox ID="txtRemarks" runat="server" CssClass="form-control" Visible="true"></asp:TextBox> </ItemTemplate>定位祖先。

将relative更改为：

.td

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

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

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

没有新的行

1 个答案: