Alcune delle mie celle di una tabella hanno una quantità molto grande di contenuto. Non voglio visualizzarli tutti fino a quando l'utente non si posiziona sulla cella, ma voglio mettere una freccia nell'angolo per indicare che può essere sospesa, proprio come nel commento di Excel. Come posso farlo usando i CSS?disegnare una freccia all'interno della cella di una tabella utilizzando i CSS
Utilizzando CSS Forme e pseudo-elementi:
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;
}
risposta aggiornato per correggere confezione:
/* 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;
}
In realtà ho avuto un piccolo problema con questa risposta, quando il testo si avvolge nella cella, la freccia invece di stare nell'angolo in alto a destra della cella, appare a la parte superiore dell'ultima parola. Ho spostato la freccia nell'angolo in alto a sinistra come soluzione alternativa. – Sawyer
Ah, il mio male --- buon punto ... Aggiornato per risolvere il problema. – brbcoding
È necessario notare che il posizionamento assoluto nella cella della tabella con 'position: relative' [non funziona in Firefox] (https://bugzilla.mozilla.org/show_bug.cgi?id=63895). Quindi un ulteriore wrapper con 'display: block; posizione: relativa' potrebbe essere necessario per rendere questa soluzione cross-browser. –
Basta sostituire 100 con la larghezza e l'altezza, e aggiungere una posizione in un posto giusto
.triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
È possibile utilizzare forme CSS e il posizionamento assoluto per raggiungere questo obiettivo.
Ecco un violino: 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;
}
Quel segno di spunta è in alto a destra della finestra e non la cella per me. (FF22, Linux) –
@Cobra_Fast - Devi avere la 'posizione: relativa' sul' td', altrimenti lo span andrà al prossimo genitore che non è statico, o alla finestra stessa. – Shauna
@Shauna Sto parlando del violino collegato. –
ho trovato un'altra soluzione compatibile per tutti i browser --- Provato.
.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>
Come visualizzare il contenuto extra sul bilico? –
@MrLister Sto usando un plugin per tool-tip, ma onestamente, ne ho provati alcuni, ma non sono tutti ideali. I motivi sono 1). il contenuto extra contiene markup di stile 2). il contenuto extra può essere davvero grande e il tool-tip posizionato davvero strano. 3). i suggerimenti per gli strumenti non sono selezionabili. Accolgo con favore alternative migliori rispetto a tool-tip. – Sawyer
Si potrebbe usare un attributo dati se lo si desidera e visualizzarlo con uno pseudo elemento ... Potrebbe essere interessante. Penso di avere un esempio da qualche parte - passa alle mie risposte precedenti ... Modifica: Trovato - http://stackoverflow.com/a/17819100/1150613 – brbcoding