HTML table cut off long text and show full text on hover/click

Question

First, I know there are a few topics about this out there, but nothing worked for me. I tried the following:

-Showing truncated text on hover using CSS ellipsis overlaps text below it

-Clip long text inside HTML table cells, show entire content on hover

-And a few solutions I figured out myself.

But none of them worked, so here I am.

I am trying to make a HTML/CSS table, which can contain long text, but it's cut off when the text is longer than the cell is width. I have set the width in my code. But, when you hover over/click on the text (doesn't matter what), the text should be shown full and the table line can also get higher for this.

My code: JSFIDDLE: https://jsfiddle.net/bcuhtvdm/

index.php: (relevant code)

        <table>
            <tr>
                <th class="t1">Lorem</th>
                <th class="t2">ipsum</th>
                <th class="t3">Lorem</th>
                <th class="t4">ipsum</th>
                <th class="t5">Lorem</th>
                <th class="t6">ipsum</th>
                <th class="t7">Lorem</th>
                <th class="t8">ipsum</th>
                <th class="t9edit"></th>
            </tr>

            <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum dolor sedum</td>
                <td>sadipscing elitr</td>
                <td>clita kasd</td>
                <td>clita kasd</td>
                <td>diam voluptuabcdefghijklmnopqrstuvwxyz</td>
                <td>sed diam</td>
                <td>sanctus est</td>
                <td>&nbsp;<i class="fas fa-edit fa-lg"></i>&nbsp;&nbsp;&nbsp;<i class="fas fa-trash fa-lg"></i></td>
            </tr>
            <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum dolor sedum</td>
                <td>sadipscing elitr</td>
                <td>clita kasd</td>
                <td>clita kasd</td>
                <td>diam voluptua</td>
                <td>sed diam</td>
                <td>sanctus est</td>
                <td>&nbsp;<i class="fas fa-edit fa-lg"></i>&nbsp;&nbsp;&nbsp;<i class="fas fa-trash fa-lg"></i></td>
            </tr>
</table>

main.css: (relevant code)

table {
  font-family: Arial, sans-serif;
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0 0 0;
  table-layout: fixed;
}
table td, table th {
  height: 50px;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  word-break: break-all;
  white-space: nowrap;
  border: 1px solid #C8C8C8;
  text-align: left;
  padding: 10px;
}
table tr:nth-child(even) {
  background-color: #E8E8E8;
}
table tr:hover {
  background-color: yellowgreen;
  overflow: visible;
  white-space: normal;
  height: auto;
}
table .t1 {
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
}
table .t1:hover {
  width: 10%;
}
table .t2 {
  width: 20%;
}
table .t2:hover {
  width: 20%;
}
table .t3 {
  width: 10%;
}
table .t4 {
  width: 10%;
}
table .t4 {
  width: 11%;
}
table .t5 {
  width: 8%;
}
table .t6 {
  width: 9%;
}
table .t7 {
  width: 11%;
}
table .t8 {
  width: 15%;
}

How my page looks at the moment: (relevant part)

I hope you understand my problem and someone can help me.

Thanks :)

Answer 1

Can you add this code snippet and tell me if it's working?

tr > td:hover {
    overflow: visible;
    white-space: unset;
}