Override "table-layout: fixed" for a single row?

Question

I'm creating a table with the styling table-layout: fixed;, and when you click on a row, it expands in height and gives you more information. To do this, I need to have a <div> element inside a <td> that takes up the entire width of the table. That means that I have to somehow override the fixed table layout for a single <td> in one row. I tried the following:

table {
  table-layout: fixed;
  width: 75vw;  /* Full table is 75vw; each cell is ~18vw */
}

.expanded {
  width: 75vw !important;  /* Make expanded <td> element full table width */
}

This didn't work, and it remained the same size. Is there another way to override the table-layout: fixed; attribute?

Answer 1

A snippet to show you how to use colspan to create a table cell which stretches the entire width of the table, and how to hide and show a row containing that cell.

// hide every even row
document.querySelectorAll('tr:nth-child(even)').forEach(e => {
  e.classList.add('hidden')
})

// on every odd row, add a click handler to show/hide the following row
document.querySelectorAll('tr:nth-child(odd)').forEach(e => {
  e.addEventListener('click', evt => {
    evt.target.closest('tr').nextElementSibling.classList.toggle('hidden')
  })
})

table {
  table-layout: fixed;
  border-collapse: collapse;
}

tr:nth-child(odd) {
  cursor: pointer;
}

tr:nth-child(odd):hover {
  background: yellow;
}

td {
  padding: 3px 10px;
  border: 1px solid silver;
}

.hidden {
  display: none;
}

<table>
  <tr>
    <td>Click</td>
    <td>me</td>
    <td>to</td>
    <td>see</td>
    <td>more</td>
    <td>information</td>
  </tr>
  <tr>
    <td colspan="6">Here is some more information</td>
  </tr>
  <tr>
    <td>Lorem</td>
    <td>ipsum</td>
    <td>dolor</td>
    <td>sit</td>
    <td>amet</td>
    <td>consectetur</td>
  </tr>
  <tr>
    <td colspan="6">Sed vulputate nibh elit, sed cursus felis rhoncus vitae.</td>
  </tr>
</table>