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.