Question

我有一张桌子：

<table id="table">
    <thead>
        <tr>
            <th> ID </th>
            <th> Job</th>
            <th> Title</th>
        </tr>
    </thead>
</table>

我想在表格左侧添加两个图标。我尝试添加div，span，似乎没有任何效果。我可以看到显示的图标，但它比表格高约20像素，并且位于最左侧。

有人知道我该如何对齐吗？

此外，我不知道它是否有作用，但是随着用户输入信息，此表将不断增长。我需要图标显示在每一行上。我已经具有使用用户输入来创建新行的功能，因此，如果我能弄清楚如何对齐上面这张简单表上的图标，则可以为其他行进行复制。

谢谢！

供参考-图标为

class = "mdi mdi-alert"

只是想，如果有人想举一个例子，我会提供：

<div class="mdi mdi-alert">
   <table>
....
   </table>
</div>

谢谢！

Answer 1

您有两种解决方法。

A。使用伪元素：

tr::before {
    content: 'youricon';
    position: absolute;
    left: -20px;
    top: 0
}

B。将图标添加到第一个单元格中，然后将其向左移动：

.mdi {
    position: absolute;
    left: -20px;
    top: 0
}


<table>
    <tr>
    <td><div class="mdi mdi-alert"></div></td>
    </tr>
</table>

如何在表格左侧添加图标？

1 个答案: