2
How can I add a comment/caption to table rows, similar to tag <abbr>?
nome | idade | sexo
<br>
<abbr title="comentario/legenda 1"> Gui | 17 | M</abbr>
<br>
<abbr title="comentario/legenda 2"> Jô | 17 | M</abbr>3
Rereading the question I understood that you want the effect only on the table line <tr>. Then follow two ways of doing 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 attribute title="" on the tag, and they work similarly to <abbr> such as the tag <a> and the <p>
<a href="#" title="meu link">deixe o mouse</a>
<p title="tag p">isso é um P</p>You can do the same on the table, but you won’t be able to make it work on TR only on TD
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 and attribute considerations title
The use of the title attribute is highly problematic for:
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
I knew the tag <img> also had, link did not know. Table tags accept attribute title?
It works however it applies the functionality in a cell, it also works to apply in a row?
@Guilhermecostamilam I edited my answer with your questions. About the title on TR I believe it is only possible with CSS or JS
You could add an example (with CSS and/or JS)?
@Guilhermecostamilam with JS I don’t know why I don’t understand much. With CSS I did a test and it is complicated to do the :Hover on TR, because the TD kind of takes up the entire space of the "cell". The element <table> has several particularities...
Except the title of Tds does not work?
@dvd minus the title of the TD the title of the TR works yes!
So? That wasn’t the problem, that only the title of the Trs appeared?
@dvd I thought he wanted us both at the same time TD and TR, ai had complicated rss, viajei.... But if it’s only on TR, it makes it easier to do it with title as well as CSS and ::after for example... or JS if you want
@dvd I edited my reply by putting only on the TR was worth the touch!
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
William, but already adding the comment/ legend, why you need something similar to what you are doing ?
– David
because my tables are not with text, spaces and
<br>s– Costamilam