Как вложить scroll внутрь элемента

Question

При наведении на td появляется скролл, помогите сделать чтобы этот скролл был внутри td и не хватал себе отдельную высоту.

table {
  border-collapse: collapse;
}

td {
  max-width: 100px;
  border: 1px solid #d4d7db;
  white-space: nowrap;
  overflow-x: hidden;
  border-spacing: 0px;
}

td:hover {
  overflow-x: auto;
}

<table>
	<tr>
		<td>Lorem ipsum dolor sit amet elit. Magni, aliquam!</td>
        <td>Lorem ipsum dolor sit amet elit. Magni, aliquam!</td>
		<td>Lorem ipsum dolor sit amet elit. Magni, aliquam!</td>
	</tr>
</table>

Answer 1

Попробуй поставить - overflow-x: scroll;

Answer 2

Будьте внимательны - в разных браузерах, а также при изменении стилей скроллбаров, может понадобиться корректировка padding-ов. Чтобы вычислялось само - только скрипты.

table { border-collapse: collapse; }

td {
  max-width: 100px;
  border: 1px solid #d4d7db;
  white-space: nowrap;
  overflow-x: hidden;
  border-spacing: 0px;
  padding: 17px 5px 17px;
}
td:hover {
  overflow-x: auto;
  padding: 17px 5px 0px;
}

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet elit. Magni, aliquam!</td>
    <td>Lorem ipsum dolor sit amet elit. Magni, aliquam!</td>
    <td>Lorem ipsum dolor sit amet elit. Magni, aliquam!</td>
  </tr>
</table>

Ещё "костыль", если текста в ячейке мало:

table { border-collapse: collapse; }

td {
  max-width: 100px;
  border: 1px solid #d4d7db;
  white-space: nowrap;
  overflow-x: hidden;
  border-spacing: 0px;
  padding: 17px 5px 17px;
}
td:hover {
  overflow-x: scroll;
  padding: 17px 5px 0px;
}

<table>
  <tr>
    <td>Lorem</td>
    <td>Lorem ipsum dolor sit amet elit. Magni, aliquam!</td>
    <td>Lorem ipsum dolor sit amet elit. Magni, aliquam!</td>
  </tr>
</table>

Answer 3

Надо было просто подробнее изучить свойства:

overflow-x: overlay;

БЛОГ НА HUSL

Как вложить scroll внутрь элемента

Ответы (3 шт):