时间戳

首页 > 解决方案 > 如何在我的表格之外向左侧添加一个图标？

html - 如何在我的表格之外向左侧添加一个图标？

问题描述

我有一张桌子：

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

谢谢！

标签： html

解决方案

你有两个解决方案。

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>

推荐阅读