Search code examples
javascriptcsshtml-tablecss-transitions

Max-height transition in table

const span = document.querySelectorAll('td>span')

const getCells = td => td.target.closest('tr').querySelectorAll('td>span')

span.forEach(e => e.addEventListener(
  "mouseenter",
  (event) => {
 getCells(event).forEach(child => child.classList.add('heightAuto'))
  },
  false
));

span.forEach(e => e.addEventListener(
  "mouseout",
  (event) => {
getCells(event).forEach(child => child.classList.remove('heightAuto'))
  },
  false
));
table {
  border-collapse: collapse;
}

td>span {
  border: 1px solid black;
  padding: 5px;
  overflow: hidden; 
  transition: all 1s ease-in-out; 
  max-height: 60px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heightAuto {
  max-height: none !important;
}
    <table>
      <tr>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
      </tr>
      <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
      </tr>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
      </tr>
    </table>

Live example : https://codepen.io/chrisspb/pen/KKxxqoo

I set a max-height limit to each row on the table and when my mouse hovers a cell, all of the row's cells display their full length. To do so, I had to add an HTML attribute in the "td", the max-height did not work on rows.

I would like to add a transition effect on the max-height changes to display it in a softer way.

I have tried with "transition" property but it has no effect. Is it possible and what can I do?

Solution

  • You can't transition to or from values like none or auto; instead, you can just transition to a really big number. In the below example, I used 1000px, but you can use whatever number you like.

    const span = document.querySelectorAll('td>span')

const getCells = td => td.target.closest('tr').querySelectorAll('td>span')

span.forEach(e => e.addEventListener(
  "mouseenter",
  (event) => {
 getCells(event).forEach(child => child.classList.add('heightAuto'))
  },
  false
));

span.forEach(e => e.addEventListener(
  "mouseout",
  (event) => {
getCells(event).forEach(child => child.classList.remove('heightAuto'))
  },
  false
));
    table {
  border-collapse: collapse;
}

td>span {
  border: 1px solid black;
  padding: 5px;
  overflow: hidden; 
  transition: all 1s ease-in-out; 
  max-height: 60px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heightAuto {
  max-height: 1000px !important;
}
        <table>
      <tr>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
      </tr>
      <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
      </tr>
    <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
        <td><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quos ipsam veritatis quas recusandae! Vel consectetur, omnis, officiis nam maiores provident ullam possimus praesentium quas at error et consequatur qui?</span></td>
      </tr>
    </table>