0

I found multiple answers, but none of them came specifically with "extra spaces" resolution.

So, I have a table with multiple columns and rows. When I have long text in a cell, I have .tablecell: hover CSS to make changes when hovered over: change its backhground to white to show it off and position: relative for its context to go over the cell on the right. When not hover-over, it is smaller inside the cell with three dots at the end of it.

Sample example would be the answer to this thread: Clip long text inside HTML table cells, show entire content on hover

Here is what I want, but when showing the long text when hovered over, I want extra spaces at the end of the text. Or I need anything else to make differ from the other cell, because if the end of this text ends up in the middle of the other cell, it becomes confusing a little bit.

Here is the example before and after hovered over as of right now:

Before

After

Here, "text" at the end ends up right next to "96" which makes it hard to see and confusing a little bit.

My solution: I figured out an easy solution, but it applies all other cells too. What I needed to do was just adding margin-right to the HTML element. For example:

<tr style="padding-right: 5px;">
  <td><div>Jane Doe</div></td>
  <td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
  <td><div>1-234-567890</div></td>
</tr>

With that, I had extra spaces when hovered over, BUT, it also affected empty cells. So, if I hover over an empty cell, now it shows blank white 7px padding too.

risingstar
  • 5
  • 3

1 Answers1

0

I figured out an easy solution. What I needed to do was just adding margin-right to the HTML element. For example:

<tr style="padding-right: 5px;">
  <td><div>Jane Doe</div></td>
  <td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
  <td><div>1-234-567890</div></td>
</tr>

With that, I had extra spaces when hovered over with no problem.

risingstar
  • 5
  • 3