How can I hide an HTML table row so that it takes up no space?

Question

How can I hide an HTML table row <tr> so that it takes up no space? I have several <tr>'s set to style="display:none;", but they still affect the size of the table and the table's border reflects the hidden rows.

Are they being repeatedly shown/hidden? Or when they're hidden, are they effectively gone for good? Because you could use javascript to just remove the row and it would probably fix your issue. — brettkelly, Jul 17 '09 at 15:49
I want to start them off as hidden, and then show them if the user clicks on a button to "show more". When they are hidden, I don't want them to take up vertical space. — MikeN, Jul 17 '09 at 15:51
i had this same issue, if you remove() the row with javascript, it still takes up some space in IE6. no way around sucky IE — mkoryak, Jul 17 '09 at 15:51
What doctype are you using? I accept that the simple fact that you're posting on SO with a good rep indicates that you probably know enough to avoid quirks mode...but the only stupid question is one that's not asked. ...and the one about the budgerigars, obviously. — David Thomas, Jul 17 '09 at 15:55
I just tested in FF 3.5 and IE8 - both hide the row with display:none — 17 of 26, Jul 17 '09 at 16:02
refer [this link][1] for easy show hide [1]: http://stackoverflow.com/a/32474501/3583859 — Vijay Kumbhoje, Sep 09 '15 at 08:25
I was having a lot of trouble with this until I realized that to get it _back_ properly, I had to use `style="display:table-row"`. Without that, it was hiding but the next row tried to fit itself into the first cell. Or some weird thing like that. — Tim Erickson, Aug 18 '17 at 02:27

score 126 · Answer 1 · answered Jul 17 '09 at 15:53

126

Can you include some code? I add style="display:none;" to my table rows all the time and it effectively hides the entire row.

answered Jul 17 '09 at 15:53

Calvin

8,697
7
43
51

worked for me. I was trying to set visibility: hidden before :( – Toadums Jun 14 '12 at 15:06
1

There is still spacing :/ – fatuhoku Apr 10 '17 at 13:27
1

how to prevent this from changing the width of the table when you show hide rows, i dont want to do table layout fixed – PirateApp Aug 02 '18 at 07:21
I had forgotten about the style... I simply had display="none;" and was mind boggled as to why it wasn't working. – I try so hard but I cry harder Aug 31 '22 at 09:03

score 74 · Answer 2 · answered Aug 10 '12 at 19:04

74

You can set <tr id="result_tr" style="display: none;"> and then show it back with JavaScript:

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';

answered Aug 10 '12 at 19:04

Jamshid Hashimi

7,639
2
28
27

4

Thank-you!! Hiding was easy, but brining them back was proving problematic. – Jefferey Cave Mar 05 '16 at 14:07
this changes the width of the table , i am doing a filter where rows need to be shown hidden based on whats inside the searchbox – PirateApp Aug 02 '18 at 07:20

score 43 · Accepted Answer · answered Jul 17 '09 at 16:08

43

I would really like to see your TABLE's styling. E.g. "border-collapse"

Just a guess, but it might affect how 'hidden' rows are being rendered.

answered Jul 17 '09 at 16:08

o.k.w

25,490
6
66
63

rgbflawed · Answer 4 · 2018-09-26T21:05:01.033

41

Thought I'd add to this a potential other solution:

<tr style='visibility:collapse'><td>stuff</td></tr>

I've only tested it on Chrome but putting this on the <tr> hides the row PLUS all the cells inside the row still contribute to the widths of the columns. I will sometimes make an extra row at the bottom of a table with just some spacers that make it so certain columns can't be less than a certain width, then hide the row using this method. (I know you're supposed to be able to do this with other css but I've never gotten that to work)

Again, I'm in a purely chrome environment so I have no idea how this functions in other browsers.

edited Sep 26 '18 at 21:05

answered Sep 04 '18 at 18:19

rgbflawed

1,957
1
22
28

1

This works in most modern browsers, with the notable exception of Safari, which renders whitespace rather than hiding the row: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility – Oscar Scholten Feb 18 '19 at 16:21
1

This worked perfectly. It maintained the column widths while hiding the row. The display: none solution changes the columns sizes which results in a jarring experience. Thanks! – k2snowman69 Dec 22 '20 at 06:47
1

joined late here but it was worth saying it helped me to effectively hide some given rows including the very first one without affecting the table layout ruled by the rowspan attribute on top. Layout that was screwed up if I used display:none. – Diego D Oct 28 '21 at 12:50
This is the only solution I can find that hides a row without changing the column widths. I should add that I have nested / indented rows that can be collapsed (hidden). – Ewan Oct 13 '22 at 13:54
Thank you for this solution! I had been trying to build a table and I like to keep width styling information for columns of unique tables in `thead` for readability. But the table I was working on had no semantic reason for a top header row. Styling of the hidden row isn't ignored with this like it is with `display: none;`. – Sigmatic Dec 24 '22 at 01:05

score 9 · Answer 5 · answered Jul 17 '09 at 16:04

9

If display: none; doesn't work, how about setting height: 0; instead? In conjunction with a negative margin (equal to, or greater than, the height of the top and bottom borders, if any) to further remove the element? I don't imagine that position: absolute; top: 0; left: -4000px; would work, but it might be worth a try.

For my part, using display: none works fine.

answered Jul 17 '09 at 16:04

David Thomas

249,100
51
377
410

I had thought of this. However to use `height` on a `tr` element you still need to change the `display` type from the default to something like `block`. – Ewan Oct 13 '22 at 13:52

score 5 · Answer 6 · answered May 12 '13 at 21:21

5

You can use style display:none with tr to hide and it will work with all browsers.

answered May 12 '13 at 21:21

SS Sid

421
6
12

score 5 · Answer 7 · answered May 21 '14 at 13:00

5

var result_style = document.getElementById('result_tr').style;
result_style.display = '';

is working perfectly for me..

answered May 21 '14 at 13:00

Vignesh

1,045
2
17
34

score 4 · Answer 8 · answered Jun 24 '12 at 09:55

4

I was having the same issue, I even added style="display: none" to each cell.

In the end I used HTML comments 

answered Jun 24 '12 at 09:55

Simon Hughes

117
5

score 4 · Answer 9 · answered Jul 17 '09 at 15:59

4

Add some of the following line-height:0px;font-size:0px;height:0px;margin:0;padding:0;

I forget which one does it. I think it's line-height for IE6.

answered Jul 17 '09 at 15:59

s_hewitt

4,252
24
24

score 2 · Answer 10 · answered Dec 03 '09 at 13:21

2

This happened to me and I was baffled as to why. Then I noticed that if i removed any nbsp; i had within the rows, then the rows didn't take up any space.

answered Dec 03 '09 at 13:21

Kevin H

21
1

Skeletial · Answer 11 · 2022-03-03T12:34:51.740

I was having the exact same problem; I'm making a leaderboard thing that can display different difficulty highscores by pressing buttons.

But after screwing around for the better part of 2 hours, I found out some stuffs:

You can use this code to hide with a button press (JavaScript):

document.getElementById('mytr').style='display:none;';

Show with a button press:

document.getElementById('mytr').style='display:table-row;';

Start off hidden (To later bring back with button press):

<tr id='mytr'style='display:none;'>

Hope this helped!

P.S. You can also show & hide headers in a similar way, only to show the header instead of writing 'display:table-row;' you write 'display:table-header;'. This can also be used to change row into headers & headers into rows.

score -1 · Answer 12 · answered Oct 10 '15 at 20:57

-1

You need to put the change the input type to hidden, all the functions of it work but it is not visible on the page

<input type="hidden" name="" id="" value="">

as long as the input type is set to that you can change the rest. Good Luck!!

answered Oct 10 '15 at 20:57

user5431987

26
2

score -3 · Answer 13 · edited Jun 26 '16 at 22:52

HTML:

<input type="checkbox" id="attraction" checked="checked" onchange="updateMap()">poi.attraction</input>

JavaScript:

function updateMap() {
     map.setOptions({'styles': getStyles() });
} 

function getStyles() {
    var styles = [];
    for (var i=0; i < types.length; i++) {
      var style = {};
      var type = types[i];
      var enabled = document.getElementById(type).checked;
      style['featureType'] = 'poi.' + type;
      style['elementType'] = 'labels';
      style['stylers'] = [{'visibility' : (enabled ? 'on' : 'off') }];
      styles.push(style);
    }
    return styles;
}

score -3 · Answer 14 · answered Oct 21 '15 at 06:02

-3

I was having same problem and I resolved the issue. Earlier css was overflow:hidden; z-index:999999;

I change it to overflow:visible;

answered Oct 21 '15 at 06:02

Ray Innov

7
4

score -5 · Answer 15 · edited May 23 '13 at 23:36

-5

position: absolute will remove it from the layout flow and should solve your problem - the element will remain in the DOM but won't affect others.

edited May 23 '13 at 23:36

HamZa

14,671
11
54
75

answered May 23 '13 at 23:07

user2415617

9

fwiw I think this is a great solution if you want to hide a column, in some specific situations. in addition add `opacity: 0` – Grapho Aug 10 '15 at 18:45

score -5 · Answer 16 · answered Dec 16 '13 at 12:42

-5

You can set

<table>
  <tr style="visibility: hidden"></tr>
</table>

answered Dec 16 '13 at 12:42

Ramy Said

401
2
6
11

5

With `visibility: hidden;` the element will still take space, that's the difference between `visibility` and `display` properties – Dmitry Pashkevich Dec 16 '13 at 13:01
Use like this `
` – Sanu Oct 21 '18 at 20:53

How can I hide an HTML table row so that it takes up no space?

16 Answers16

Linked