Home/ Questions/Q 7739271
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:28:53+00:00

I have an HTML table containing a few rows (this is built dynamically). All

  • 0

I have an HTML table containing a few rows (this is built dynamically). All <tr>s have one <td> inside.

If one <td> doesn’t have HTML content inside, I would like it to be invisible.

How can this be done? (Not that the HTML inside is rendered dynamically and I do not want to use display:none or any other property on the <td> or <tr>).

Code sample:

<html>
    <body bgcolor="#E6E6FA">
        <table cellSpacing="0" cellPadding="0">
            <tr>
                <td>one cell</td>
            </tr>
            <tr>
                <td bgcolor="#FF0000"></td>
            </tr>
            <tr>
                <td>two cell</td>
            </tr>
        </table>
    </body>
</html>

In Firefox the empty TD is invisible. However, in IE the TD takes up 1 pixel in height:

enter image description here

Looking with DOM Inspector I see that it takes 1 pixel:

enter image description here

How can I set the TD not to be visible? Any scripts I can execute inside the TD?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use the CSS pseudo selector :empty: 

    #myDynamicTable td:empty
{
  display: none;
}

    jsFiddle example: http://jsfiddle.net/vKEBY/6/

    And if you want to support IE<9: 

    var ieVer = getInternetExplorerVersion();
if (ieVer != -1 && ieVer < 9.0) {
    // for IE<9 support
    var dynamicTable = document.getElementById("myDynamicTable");
    var TDs = dynamicTable.getElementsByTagName("td");

    for (var i = 0; i < TDs.length; i++) {
        if (TDs[i].innerHTML == "") {
            TDs[i].style.display = "none";
        }
    }
}

/**
  * All credits to Microsoft
  * http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx#ParsingUA
  */
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
    }
    return rv;
}​

    jsFiddle example: http://jsfiddle.net/vKEBY/6/

    • 0