Einige meiner Tabellenzellen haben wirklich große Mengen an Inhalt. Ich möchte nicht alle anzeigen, bis der Benutzer auf der Zelle schwebt, aber ich möchte einen Pfeil in die Ecke legen, um anzuzeigen, dass er schweben kann - genau wie im Excel-Kommentar. Wie kann ich dies mit CSS tun?Zeichnen Sie einen Pfeil in der Tabellenzelle mit CSS
Mit CSS Formen und Pseudo-Elemente:
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;
}
aktualisiert Antwort Verpackung zu beheben:
/* 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;
}
Eigentlich habe ich ein kleines Problem mit dieser Antwort, wenn der Text in der Zelle umhüllt, der Pfeil statt in der oberen rechten Ecke der Zelle bleibt, erscheint es bei das Oberste des letzten Wortes. Ich habe den Pfeil als Workaround in die linke obere Ecke verschoben. – Sawyer
Ah, mein schlechter --- guter Punkt ... Aktualisiert, um das zu beheben. – brbcoding
Müssen Sie bemerken, dass die absolute Positionierung in der Tabellenzelle mit 'position: relative' [funktioniert nicht in Firefox] (https://bugzilla.mozilla.org/show_bug.cgi?id=63895). Also ein extra Wrapper mit 'display: block; Position: relativ 'kann erforderlich sein, um diese Lösung browserübergreifend zu machen. –
ersetzen Nur 100 mit Ihrer Breite und Höhe, und fügen Sie eine Position in einem richtigen Ort
.triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
Sie können CSS Formen und absolute Positionierung verwenden, um dies zu erreichen.
Hier ist eine Geige: http://jsfiddle.net/pNmQg/
table td { position: relative; }
table td span.arrow {
position: absolute;
top: 0;
right: 0;
border-top: 5px solid red;
border-left: 5px solid transparent;
}
Das Häkchen befindet sich oben rechts im Fenster und nicht die Zelle für mich. (FF22, Linux) –
@Cobra_Fast - Sie müssen die 'position: relative' auf dem' td' haben, sonst wird der Bereich zum nächsten Elternteil, der nicht statisch ist, oder zum Fenster selbst gehen. – Shauna
@Shauna Ich spreche über die Geige verbunden. –
ich eine andere Lösung kompatibel für alle Browser gefunden --- getestet.
.arrow-right-1 {
position: absolute;
top: -1px;
right: -5px;
float: right;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
transform: rotate(45deg);
}
td {
border: solid 1px blue;
width: 220px;
height: 100px;
/* padding: 0px !important; */
/* vertical-align: top; */
position: relative;
}<table class="table">
<tbody>
<tr>
<td>
<div class="arrow-right-1"></div>you can increase or decrease the size td's width/height or can put more text
</td>
</tr>
</tbody>
</table>
Wie Sie schweben die zusätzlichen Inhalte angezeigt werden? –
@MrLister Ich benutze ein Tool-Tipp-Plugin, aber ehrlich gesagt, ich habe ein paar ausprobiert, aber sie sind alle nicht ideal. Gründe sind 1). der zusätzliche Inhalt enthält Stilmarkierungen 2). Der zusätzliche Inhalt kann sehr groß sein und die Tool-Spitze ist wirklich komisch positioniert. 3). Tool-Tipps sind nicht auswählbar. Ich begrüße alle besseren Alternativen als Tool-Tipp. – Sawyer
Sie könnten ein Datenattribut verwenden, wenn Sie wollten und es mit einem Pseudoelement anzeigen ... Das könnte cool sein. Ich denke, ich habe ein Beispiel irgendwo - geht zu meinen vorherigen Antworten ... Edit: Found it - http://StackOverflow.com/a/17819100/1150613 – brbcoding