I am currently working on an HTML Table that serves as a summary table for displaying a list of items. The table has 4 visible columns out of approximately 20, with the remaining columns set to display: none;. However, the hidden cells are causing the rows to be larger than necessary, even though only the visible cells need to determine the row height. (I don't want to delete the hidden cells since users will later need the option to make them visible).
My Question: Is there a way to dynamically adjust the row height based on the content of the visible cells when the visibility of cells/columns changes?
Current CSS:
table.grid {
border-collapse: collapse;
}
table.grid tr td {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
white-space: nowrap;
vertical-align: top;
}
table.grid tr td input {
display: block;
}
The current CSS code successfully removes horizontal white space between cells, but I now need help eliminating any additional vertical space. Any suggestions on how to overcome this obstacle would be greatly appreciated.