La información sobre herramientas para las celdas de tabla HTML (no Javascript)

Es posible tener información sobre herramientas para las celdas de la tabla sin JavaScript. No se puede utilizar.

InformationsquelleAutor dublintech | 2012-12-12

6 Kommentare

  1. 160

    han intentado?

    <td title="This is Title">

    su trabajo muy bien aquí en Firefox v 18 (Aurora), Internet Explorer 8 & Google Chrome v 23x

    • Lo es, pero es muy lento 🙁
  2. 17

    Sí. Usted puede utilizar el title atributo en los elementos de las celdas, con la facilidad de uso pobres, o puedes usar CSS tooltips (varias de las preguntas, posiblemente duplicados de este).

  3. 15

    El de más alto rango de respuesta por Mudassar Bashir usando el atributo «title» parece la manera más fácil de hacer esto, pero da menos control sobre cómo el comentario/descripción aparece.

    He encontrado que La respuesta por Christophe de una costumbre clase tooltip parece dar mucho más control sobre el comportamiento de la observación/descripción. Desde la demo no se incluyen en una tabla, como por la pregunta, aquí es una demostración en la que se incluye una tabla.

    Tenga en cuenta que la «posición» de estilo para el elemento primario de la luz (en este caso), debe estar ajustado a «relativa» para que el comentario no empuje el contenido de la tabla todo cuando se muestra. Me tomó un poco de tiempo para averiguar eso.

    CSS:

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

    HTML:

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

  4. 5

    Puede utilizar css y el :hover pseudo-propiedad. Aquí está una simple demo. Utiliza el siguiente css:

    a span.tooltip {display:none;}
    a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;}

    Tenga en cuenta que los navegadores antiguos que han limitado el apoyo a :hover.

  5. 2

    Una evolución de lo que BioData41 añadido…

    Lugar lo que sigue en estilo 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>

    A continuación, utilice como este:

            <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>
    • ¿Cuál es la diferencia?
  6. 0
    if (data[j] =='B'){
        row.cells[j].title="Basic";
    }

    En Java script condicionalmente añadir título al comparar el valor de los Datos.
    La Tabla es generada por script de Java de forma dinámica.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea