Descrizione comandi per celle nella tabella HTML (senza javascript)

Question

È possibile avere descrizioni comandi per celle di tabella senza JavaScript. Non posso usarlo. Grazie?

Answer 1

hai provato?

<td title="This is Title"> 

il suo bel lavoro qui su Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x

Answer 2

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).

Answer 3

È 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.

Answer 4

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>

Answer 5

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>