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?
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>