Как зафиксировать большое количество контента в ячейке таблицы, не растягивая всю строку таблицы

Question

Я пытаюсь вписать много текста в мою таблицу HTML :

 <tr>
   <td>
     - some information 1
     - anotothe information 1
     - some information 2
     - some information 3
     - some information 4
     - some information 5
     - some information 6
     - some information 7
     - some information 8
     - some information 9
     - some information 10
     - some information 11
     - some information 12
     - some information 13
     - some information 14
     - ...
  </td>
  <td>
      ...
  </td>
</tr>

Все остальные строки имеют стандартную высоту.В нем так много контента, что делает ячейку таблицы слишком высокой и отталкивает другие от экрана.

Можете ли вы посоветовать какой-нибудь простой трюк с CSS или JS, как решить эту проблему?

IЯ думаю о каком-то JS-коде - поэтому, когда вы наводите курсор на эту ячейку таблицы , этот контент будет отображаться на экране, и мы сможем легко его прочитать?

Answer 1

Вы можете использовать jQuery с его простыми методами show и hide, но в vanilla JS вы можете попробовать что-то вроде этого:

<td onmouseenter="expandContent()" onmouseleave="hideContent()">
    <div class="hoverable" onmouseenter="expandContent()" onmouseleave="hideContent()">
     ...content
    </div>
</td>

function expandContent(){
    const content = document.querySelector(".hoverable");
    content.style.height = "300px"; //or whatever height u need to fit the content, can be set to auto too. 
}

 function hideContent(){
    const content = document.querySelector(".hoverable");
    content.style.height = "100px"; //or whatever inital height u want to have
}

и для вашего CSS:

.hoverable{
    height: 100px; //your initial height
    overflow: hidden; //stop content from "spilling" 
} 
td{ 
    overflow: hidden //stop content from "spilling"
}

Itследует увеличить ваш тд при наведении на высоту, которую вы хотите.Дайте мне знать, если это работает для вас :)

РЕДАКТИРОВАТЬ: Я явно зашел слишком далеко вчера. Простейшее решение этой проблемы, я полагаю, заключается в добавлении свойства: hover к css.

.hoverable{
    height: 5px; //your initial height 
    overflow: hidden; //stop content from "spilling"
}
.hoverable:hover {
    height: 600px; //or height: auto then it will expand to text height
}
td{
    overflow: hidden;
}

Это должно быть все, что вам нужно, без дополнительных методов JavaScript.Вы также можете добавить другие свойства при наведении, например, изменить цвет фона

background: lightblue;

Извините за путаницу:)

Answer 2

Пожалуйста, уточните вопрос, требует ли этот ответ других настроек размеров таблицы.

Если ваши поля имеют фиксированную ширину и если ячейка для прокрутки стоит в стороне или между другими ячейками, вы можете в конечном итоге сбросить еесобственный дисплей для прокрутки.

пример:

table {
  width:350px;/* do you have a set width ? */
  border:solid;
}
td {
  width: 175px;/* make it fit your column's width */
  display:block;/* destroy table-layout to allow scrolling */
  max-height:150px;/* set a fixed or a max-height to tell when to start scrolling */
  overflow:auto;/* trigger scrolling when needed */
}
td + td {
  background:yellow; /* see me */
  display:table-cell;/*back to normal , defaut display tor  TD elements */
}

<table>
<tr>
   <td>
     - some information 1
     - anotothe information 1
     - some information 2
     - some information 3
     - some information 4
     - some information 5
     - some information 6
     - some information 7
     - some information 8
     - some information 9
     - some information 10
     - some information 11
     - some information 12
     - some information 13
     - some information 14
     - ...
  </td>
  <td>
      little amount of content here
  </td>
</tr>
</table>

Answer 3

Вы можете задать высоту, а затем установить переполнение для прокрутки.Как это:

td {
    display: block;
    height: 50px; //whatever height you want to limit it to
    overflow: scroll;
}