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><trstyle="display:none"><tdcolspan="2"><divid="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><trstyle="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.

<tablestyle="border-collapse:collapse;"><tr><td>Column 1</td><td>Column 2</td></tr><tr><tdstyle="padding:0;"colspan="2"><divid="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;.