JSFiddle - React, Tailwind, and code Playground

HTML

<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">dolor</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>

CSS

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%;
}