Hiding table rows without changing the overall width

Question

Is there a way to hide table rows without affecting the overall width of the table? I have javascript that shows / hides some rows of a table, but when the rows are set to display: none; , the table is compressed to fit the contents of the visible rows.

Answer 1

If you want to preserve the overall width of the table, you can check it before hiding the 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 result in individual columns being paid when hiding the row. A possible way to mitigate this is to add style to the table:

  table { table-layout: fixed; } 

Answer 2

For reference, the levik solution works just fine. In my case, using jQuery, the solution looked something like this:

 $('#tableId').width($('#tableId').width()); 

Answer 3

In CSS table-layout: fixed; your table indicates that the browser respects the dimensions you specify for the heights and widths. This usually disables the automatic resizing of the browser if you have not indicated the preferred sizes of your rows and columns.

Answer 4

You can do this using pure HTML.

 <table border="1"> <colgroup> <col width="150px" /> <col width="10px" /> <col width="220px" /> </colgroup> <tr> <td valign="top">1</td> <td> </td> <td>2</td> </tr> <tr> <td>3</td> <td> </td> <td>4</td> </tr> </table>