Comment / caption in table rows

Question

Comment / caption in table rows

Navigation

#1 by (3 votes)

2

How can I add a comment / caption on table rows, similar to the <abbr> tag?

nome | idade | sexo
<br>
<abbr title="comentario/legenda 1">&nbsp; Gui &nbsp;| &nbsp;&nbsp;17 &nbsp;&nbsp; | &nbsp;&nbsp;M</abbr>
<br>
<abbr title="comentario/legenda 2">&nbsp;&nbsp; Jô &nbsp;&nbsp;| &nbsp;&nbsp;17 &nbsp;&nbsp; | &nbsp;&nbsp;M</abbr>

html css

asked by anonymous 12.04.2018 / 18:47

1 answer

When to allocate memory dynamically? Div does not respect image limit in css

score 3 · Accepted Answer

EDIT:

By reading the question I understand that you want the effect only on the line of the <tr> table. Then there are two ways to do following the idea of the answer already given.

tr {
    position: relative;
    border: 1px solid salmon;
}
tr:first-of-type:hover::after {
    content: attr(data-text);
    position: absolute;
    z-index: 99;
    background-color: powderblue;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 10px;
    font-family: sans-serif;
}
td {
  border: 1px solid salmon
}

<table>
    <tr data-text="descrição n# 1">
        <td >TR</td>
        <td>com hover::after</td>
    </tr>
    <tr title="descrição n# 2">
        <td>TR</td>
        <td>com title=""</td>
    </tr>
</table>

Follows a simple solution using pseudo-element and a custom attribute in content

td {
    position: relative;
    border: 1px solid salmon;
}
td:hover::after {
    content: attr(data-text);
    position: absolute;
    z-index: 99;
    top: 115%;
    left: 0;
    background-color: powderblue;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 10px;
    font-family: sans-serif;
}

<table>
    <tr>
        <td data-text="descrição n# 1">item 1</td>
        <td data-text="descrição n# 2">item 2</td>
    </tr>
    <tr>
        <td data-text="descrição n# 3">item 3</td>
        <td data-text="descrição n# 4">item 4</td>
    </tr>
</table>

Now, there are some elements that accept the title="" attribute in the tag, and they work similarly to <abbr> such as <a> tag and <p>

<a href="#" title="meu link">deixe o mouse</a>
<p title="tag p">isso é um P</p>

You can do the same in the table, but you will not be able to run TR in TD only

table {border: 1px solid black}

<table>
    <tr title="teste TR 1">
        <td title="teste 1" data-text="descrição n# 1">item 1</td>
        <td title="teste 2" data-text="descrição n# 2">item 2</td>
    </tr>
    <tr title="teste TR 1">
        <td title="teste 3" data-text="descrição n# 3">item 3</td>
        <td title="teste 4" data-text="descrição n# 4">item 4</td>
    </tr>
</table>

OBS: Accessibility considerations and the title attribute

The use of the title attribute is highly problematic for:

People who use touch-only devices
People browsing with keyboards
People who navigate with assistive technology, such as screen readers or magnifiers
People with motor control deficiencies
People with cognitive concerns

Source: link