È possibile avere descrizioni comandi per celle di tabella senza JavaScript. Non posso usarlo. Grazie?Descrizione comandi per celle nella tabella HTML (senza javascript)
risposta
hai provato?
<td title="This is Title">
il suo bel lavoro qui su Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x
Sì. È possibile utilizzare l'attributo title
sugli elementi della cella, con scarsa usabilità, oppure è possibile utilizzare le descrizioni dei comandi CSS (diverse domande esistenti, possibilmente duplicate di questa).
ehm ... il tuo link punta a questa pagina. – Christophe
Si trattava di una modifica dispari in effetti; ora annullato. Ad ogni modo, la ricerca di "tooltip" fornisce molte domande e risposte interessanti. –
È possibile utilizzare css e la proprietà pseudo: hover. Ecco un simple demo. Utilizza il seguente css:
a span.tooltip {display:none;}
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;}
Nota che i browser meno recenti hanno un supporto limitato per: hover.
La risposta più alto in classifica da Mudassar Bashir utilizzando l'attributo "title" sembra il modo più semplice per fai questo, ma ti dà meno controllo su come viene visualizzato il commento/suggerimento.
Ho trovato che La risposta di Christophe per una classe di suggerimenti personalizzati sembra dare molto più controllo sul comportamento del commento/suggerimento. Poiché la demo fornita non include una tabella, come da domanda, qui è a demo that includes a table.
Si noti che lo stile "posizione" per l'elemento padre dello span (a in questo caso), deve essere impostato su "relativo" in modo che il commento non spinga il contenuto della tabella intorno quando viene visualizzato. Mi ci è voluto un po 'per capirlo.
#MyTable{
border-style:solid;
border-color:black;
border-width:2px
}
#MyTable td{
border-style:solid;
border-color:black;
border-width:1px;
padding:3px;
}
.CellWithComment{
position:relative;
}
.CellComment{
display:none;
position:absolute;
z-index:100;
border:1px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:red;
padding:3px;
color:red;
top:20px;
left:20px;
}
.CellWithComment:hover span.CellComment{
display:block;
}
<table id="MyTable">
<caption>Cell 1,2 Has a Comment</caption>
<thead>
<tr>
<td>Heading 1</td>
<td>Heading 2</td>
<td>Heading 3</td>
</tr>
</thead>
<tbody>
<tr></tr>
<td>Cell 1,1</td>
<td class="CellWithComment">Cell 1,2
<span class="CellComment">Here is a comment</span>
</td>
<td>Cell 1,3</td>
<tr>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
</tbody>
</table>
Un'evoluzione di ciò che BioData41 aggiunto ...
Luogo seguito in stile CSS
<style>
.CellWithComment{position:relative;}
.CellComment
{
visibility: hidden;
width: auto;
position:absolute;
z-index:100;
text-align: Left;
opacity: 0.4;
transition: opacity 2s;
border-radius: 6px;
background-color: #555;
padding:3px;
top:-30px;
left:0px;
}
.CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;}
</style>
Poi, usare in questo modo:
<table>
<tr>
<th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
<th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
<th>Opened</th>
<th>Event</th>
<th>Severity</th>
<th>Id</th>
<th>Component Name</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
Qual è la differenza? –
- 1. trascinando celle della tabella html
- 2. ricerca nella tabella html
- 3. TABELLA senza bordi di celle verticali
- 4. Utilizzando Javascript per cambiare le celle della tabella larghezza
- 5. Crea tabella HTML utilizzando javascript
- 6. Modelli HTML in Javascript? Senza codifica nella pagina?
- 7. Mostra descrizione comandi per serie invisibili in Highcharts
- 8. Come ottenere un valore di celle nella tabella html con JQuery
- 9. Mostra descrizione comandi sotto Elementi ActionBar
- 10. Descrizione comandi overlay display alla prima esecuzione
- 11. Javascript per esportare la tabella html in Excel
- 12. Descrizione comandi + Evidenzia animazioni con Clipboard.js Fare clic su
- 13. Html anchor orizzontalmente senza javascript
- 14. celle esagonali in html
- 15. "Disabilitare" una tabella HTML con Javascript
- 16. Come nascondere la colonna nella tabella delle celle GWT?
- 17. Larghezza fissa della colonna nella tabella HTML
- 18. Orgmode Tabella formattazione di celle
- 19. rowspan dinamico e complesso nella tabella HTML
- 20. Colonne non selezionabili nella tabella HTML
- 21. Mostra dati nella tabella html ASP.NET
- 22. Visualizzazione della descrizione comandi su asp.net Controllo grafico MS
- 23. Genera tabella HTML da array JavaScript 2D
- 24. Visualizza tabella HTML nella visualizzazione Web
- 25. jQuery selector per afferrare le celle nella stessa colonna
- 26. Nascondere le colonne nella tabella JavaScript
- 27. Crea tabella HTML da javascript array
- 28. JavaScript - esportazione dati tabella HTML in Excel
- 29. Esporta tabella HTML per Excel caratteri speciali funzione JavaScript cambiati
- 30. Un'alternativa migliore di per mostrare celle vuote della tabella HTML?
Lo è, ma è molto lento :( – thigi