How to Hide an HTML Table Row <Tr> So That It Takes Up No Space

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

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.

hide with js an HTML table row tr so that it takes up no space

Change tr.style.visibility = "none"; to tr.style.display = 'none'

With display:none, there will be no space allocated for the tr as tr will not appear on the page and we can interact with the tr through the DOM.

With visibility:hidden the tr is not visible but it takes up the space allocated to it. This means that tr is rendered on the page but does not seem to be visible.

How to remove unwanted space between rows and columns in table?

Add this CSS reset to your CSS code: (From here)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

It'll reset the CSS effectively, getting rid of the padding and margins.

Hide Table Row Using CSS

Use a class instead of an id:

.hide-row { display:none; }

And in your html/php file:

<table>
  <tr>
      <th>Name</th>
      <th>Address</th>
  </tr>
     <?php foreach( $cops as $row ) { ?>
        <tr class="hide-row">
            <td><?php echo $row->name; ?></td>
            <td><?php echo $row->address; ?></td>
        </tr>
     <?php } ?>
</table>

If you have to group your rows you could use a tbody tag instead of a div tag.

Can we have multiple <tbody> in same <table>?

 .hide-row tr { display:none; }

And in your html/php file:

<table>
  <tr>
      <th>Name</th>
      <th>Address</th>
  </tr>
    <tbody class="hide-row">
     <?php foreach( $cops as $row ) { ?>
        <tr>
            <td><?php echo $row->name; ?></td>
            <td><?php echo $row->address; ?></td>
        </tr>
     <?php } ?>
     </tbody>
</table>

Hiding a tr, while still involving it in width calculations

If I've understood correctly you are looking for visibility: collapse; declaration:

17.5.5 Dynamic row and column effects

The visibility property takes the value collapse for row, row
group, column, and column group elements. This value causes the entire
row or column to be removed from the display, and the space normally
taken up by the row or column to be made available for other content.
Contents of spanned rows and columns that intersect the collapsed
column or row are clipped. The suppression of the row or column,
however, does not otherwise affect the layout of the table. This
allows dynamic effects to remove table rows or columns without forcing
a re-layout of the table in order to account for the potential change
in column constraints.

However it seems this is buggy on some of web browsers. The MDN states:

The support for visibility:collapse is missing or partially incorrect
in some modern browsers. In many cases it may not be correctly treated
like visibility:hidden on elements other than table rows and columns.

Unfortunately it acts as visibility: hidden on Chrome37: Demo Here.

But fortunately, you can fake the effect by line-height: 0 declaration:

Updated Demo

.hidden {
  visibility: collapse;
  line-height: 0; /* Set the height of the line box to 0
                     in order to remove the occupied space */
}