我的一些表格单元格包含大量内容。在用户将鼠标悬停在单元格上之前,我不想显示所有这些,但我想在 Angular 落放置一个箭头以指示它可以悬停 - 就像在 excel 注释中一样。我如何使用 CSS 做到这一点?
最佳答案
使用 CSS 形状和伪元素:
HTML
<table>
<tr><td class="comment">Foo</td></tr>
</table>
CSS
* { margin: 0; padding: 0;}
td { border: 1px solid black; }
.comment:after {
content: "";
position: relative;
top: 0.5em;
border-left: 0.5em solid transparent;
border-top: 0.5em solid red;
}
修复包装的更新答案:
/* add relative positioning to the td */
td { border: 1px solid black; position: relative; }
/* and absolute positioning for the triangle */
.comment:after {
content: "";
position: absolute;
/* left: calc(100% - 0.5em); */
/* use right: 0; instead */
right: 0;
top: 0;
border-left: 0.5em solid transparent;
border-top: 0.5em solid red;
}
关于css - 使用 CSS 在表格单元格内绘制箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18359925/