How to hide table rows without resizing overall width?

Question

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.

Linking to [question with answer](https://stackoverflow.com/questions/25807564/hiding-a-tr-while-still-involving-it-in-width-calculations) for anyone looking for a modern solution: all relevant browsers support `visibility: collapse` (for rows and columns) which is specifically designed for that use case. — Martin, Apr 05 '22 at 12:09

levik · Accepted Answer · 2008-09-29T02:02:56.633

9

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;
 }

edited Sep 29 '08 at 02:02

answered Sep 29 '08 at 01:36

levik

114,835
27
73
90

1

...until you resize the window, then the table's fixed width doesn't reflow any more, because it's now a fixed pixel width... – ijw Sep 02 '09 at 12:35
I using table-layout: fixed; and my problem go away :D – Nguyên Ngô Duy Mar 13 '19 at 04:27

score 8 · Answer 2 · answered Mar 07 '19 at 16:08

8

CSS rule visibility: collapse was designed exactly for that.

tbody.collapsed > tr {
    visibility: collapse;
}

After adding this CSS you could trigger visibility from JS with:

tbody.classList.toggle('collapsed');

answered Mar 07 '19 at 16:08

Klesun

12,280
5
59
52

This definitely seems like the best answer to me. – Matt Skeldon May 31 '19 at 13:20

score 3 · Answer 3 · answered Sep 29 '08 at 02:09

3

For reference, levik's solution works perfectly. In my case, using jQuery, the solution looked something like this:

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

answered Sep 29 '08 at 02:09

Wilco

32,754
49
128
160

score 2 · Answer 4 · answered Sep 29 '08 at 13:23

In CSS, table-layout: fixed; on your table instructs the browser to honor the sizes you've specified for heights and widths. This generally suppresses auto-resizing by the browser unless you haven't given any hints as to the preferred sizes of your rows and columns.

score 0 · Answer 5 · edited Aug 27 '20 at 11:05

0

You can do it 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>

edited Aug 27 '20 at 11:05

anastaciu

23,467
7
28
53

answered Nov 24 '08 at 15:10

labilbe

3,501
2
29
34

How to hide table rows without resizing overall width?

5 Answers5

Linked