CODEWITHSUNDEEP
cssgoogle-chromehtml-tableoverflow
shakell
shakell

Reputation: 351

Google chrome: how to display full text when the mouse hovers over a table cell

Expected behavior

I have a table on my web page. In some table cells, it has long text and I set these css for td label. When the text is longer than the table cell's width, it will be hidden.

td {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

When the mouse hovers over these table cells,i want the full text appear.

Current behavior

For safari, when the mouse hovers over the table cell who has long text, the full text appears. enter image description here

For google chrome, there is no reaction when the mouse hovers over it. enter image description here Question

How google chrome can display the full text like safari? Any suggestions or ideas will be welcomed.

Upvotes: 2

Views: 404

Answers (2)

Asuka165
Asuka165

Reputation: 312

I think in your case, it is better to put "title" attributes in your <td>. More about Title Attributes

For Example :

<td title='Full Text about School 1'>School 1 Data</td>
<td title='Full Text about School 2'>School 2 Data</td>
...
<td title='Full Text about School X'>School X Data</td>

Upvotes: 2

August
August

Reputation: 2113

You could use title attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

<p>Newlines in title should be taken into account, like this <abbr title="This is a
multiline title">example</abbr>.</p>

Upvotes: 0

Related Questions