How Can I Get Html Table Row To Default To No Height When Div Within It Has Visibility:none

In html I'm using a to display a numbers of rows, then between each row is another row containing a single , that in turn contains a with style:none. This row contains addition

Solution 1:

apply the style to your table row, not your div:

    <table>
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>
<tr style="display:none">
    <td colspan="2">
        <div id="1">
        </div>
    </td>   
</tr>    
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>
</table> 

Solution 2:

You had to apply style to the tr. Modified your code as follows, now if display is block there is gap and when it is none, no gap:

<table>
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>
<tr  style="display:block;">
    <td>

    </td>   
    <td></td>
</tr>    
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>
</table> 

Solution 3:

I'm not sure if i understood you question correctly, so please let me know if not.

If you use Jquery then this would add the display=none to the row with an

   $(document).ready(function () {
        $('table tr').each(function (i, row) {
            console.log(i)//$(row).append("test");
            Row = $(row);
            if (Row.find("div:hidden").length == 1) {
                $(Row).attr("display","none");
            }
        });
    });

Updated your jsfiddle: http://jsfiddle.net/zz5zo2jh/25/

I hope it helps

Solution 4:

See this JSFiddle.

Use border-collapse: collapse; on the <table> and padding: 0; on the <tr>.

<tr> elements normally have display: table-row; as default so I wouldn’t change that, because it might lead to some other rendering issues.

<table style="border-collapse:collapse;">
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>
<tr>
    <td style="padding:0;" colspan="2">
        <div id="d1" style="display:none;margin:1px;"></div>
    </td>
</tr>
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
</tr>
</table>

the margin on the <div> is optional and is only there because the padding has been removed. This way it will look the same if the div is set to display: block;.