Take the 2-minute tour ×

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:

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

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|improve this question
Why don't you want to use display:none? –  ComFreek Apr 2 '12 at 7:49
I dont have control over the TR and the TD above. The content inside is rendered dynamically. if its empty i wouldnt want to have even 1 pixel for it. –  Tal Apr 2 '12 at 7:50
I believe it happens due to browsers inconsistency. IE is a bitch and tables have one of the worst cross browser implementations. That is not a good combination. –  iMoses Apr 2 '12 at 7:56

2 Answers 2

up vote 2 down vote accepted

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).
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
    return rv;


share|improve this answer
Although as far as IE goes, :empty only works in IE 9. –  Paul D. Waite Apr 2 '12 at 7:56
@PaulD.Waite You're right, I just tested that! But you can build a solution with JavaScript. –  ComFreek Apr 2 '12 at 7:57
and for all we know, the OP only needs it to work in IE 9. –  Paul D. Waite Apr 2 '12 at 7:59
Thanks for that, this is indeed nice , however we need solution for IE7 at least... any suggestion for Javascript solution? –  Tal Apr 2 '12 at 8:05
@Tal Just added ;) –  ComFreek Apr 2 '12 at 8:06

If using jQuery this script could become much cleaner (just a thought).

$('#myTable td:empty').hide();
share|improve this answer
but again - this is only for IE9 and above...correct? –  Tal Apr 2 '12 at 8:49
Incorrect. jQuery makes all the adjustments for full cross-browser support. It will work on IE6 (if someone is unfortunate enough to use it) :) –  iMoses Apr 2 '12 at 9:05
It's worth mentioning that this is not code called once to set up a rule, but rather would need to be called again if the table changed. –  Adam Tolley Nov 19 '13 at 21:16

Your Answer


