Is there a way to hide table rows without affecting the overall table width? I've got some javascript that shows/hides some table rows, but when the rows are set to display: none;
, the table with shrinks to fit the contents of the visible rows.
Is there a way to hide table rows without affecting the overall table width? I've got some javascript that shows/hides some table rows, but when the rows are set to display: none;
, the table with shrinks to fit the contents of the visible rows.
If you are looking to preserve the overall width of the table, you can check it prior to hiding a row, and explicitly set the width style property to this value:
table.style.width = table.clientWidth + "px";
table.rows[3].style.display = "none";
However, this may cause the individual columns to reflow when you hide the row. A possible way to mitigate this is by adding a style to your table:
table {
table-layout: fixed;
}