HTML таблица обрезает длинный текст и показывает полный текст при наведении / клике

Question

Во-первых, я знаю, что есть несколько тем об этом, но у меня ничего не получалось. Я попробовал следующее:

- Отображение усеченного текста при наведении курсора с помощью многоточия CSS перекрывает текст под ним

- Обрезать длинный текст внутри ячеек таблицы HTML, показать весь текстсодержание при наведении

- и несколько решений я сам выяснил.

Но ни одно из них не сработало, поэтому я здесь.

Я пытаюсь сделатьтаблица HTML / CSS, которая может содержать длинный текст, но обрезается, когда текст длиннее ячейки ширины. Я установил ширину в моем коде. Но когда вы наводите указатель мыши на текст над кнопкой мыши (неважно, что), текст должен отображаться полностью, и строка таблицы также может быть увеличена для этого.

Мой код: JSFIDDLE:https://jsfiddle.net/bcuhtvdm/

index.php: (соответствующий код)

        <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: (соответствующий код)

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

Как выглядит моя страница в данный момент: (соответствующая часть)

Я надеюсь, вы понимаете мою проблему, и кто-то может мне помочь.

Спасибо:)

Answer 1

Можете ли вы добавить этот фрагмент кода и сказать мне, если он работает?

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

Answer 2

Я обменял таблицу .th: hover на table .td: hover. Вроде работает.

table td:hover {
  background-color: yellowgreen;
  overflow: visible;
  white-space: normal;
  height: auto;
}

Answer 3

Вы можете использовать свойство переполнения текста

table tr:hover td {
    text-overflow: initial;
    white-space: normal;
}