使用CSS在表格单元格内绘制一个箭头 [英] draw an arrow inside table cell using CSS

问题描述

我的一些表格单元格中包含大量内容。我不想显示所有这些，直到用户在单元格上悬停，但我想在角落放一个箭头表示它可以悬停 - 就像在excel注释中一样。我怎么能用CSS做到这一点？

Some of my table cells have really large amounts of content. I don't want to display all of them until the user hovers on the cell, but I want to put a arrow in the corner to indicate it can be hovered - just like in the excel comment. How can I do this using CSS?

推荐答案

使用CSS形状和伪元素：

Using CSS Shapes and pseudo-elements:

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

DEMO

DEMO

修正包装的更新答案：

/* 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;
}

修正了演示

Fixed Demo

这篇关于使用CSS在表格单元格内绘制一个箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！