How do I get IE7 to print this <table> properly with columns hidden by CSS?

Question

Note that this only seems to be an issue in Internet Explorer versions 7 and lower. Here's a dumbed-down version of my HTML:

<table>

<colgroup>
<col width="20" class="hidden_col" />
<col width="50" />
<col />
</colgroup>

<tr>
<td class="hidden_col"><input type="checkbox" /></td>
<td>Title</td>
<td>Longer Description</td>
</tr>

</table>

Then, I'm including a "print" stylesheet, like this:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

And that stylesheet includes the following:

.hidden_col {
    display: none;
}

Now on just about every other browser, even including IE8, this works fine. On the screen you see that first column, in print preview you don't. But for some reason, IE7 behaves very oddly. It displays things normally on the screen of course, but when you go to print preview in IE7, the only thing that shows is "Longer Description." So in other words, it hides that first column, and it also hides the second column. How do I make this work in all browsers?

Answer 1

You cannot hide a single element of a table, elements inside a table can only use the CSS display properties that start with 'table-', at least they're only supposed to. See this for more information.

Edit: I'd assume your problem is just a glitch from using properties you're not supposed to be using.

Answer 2

Try this: (untested)

td .hidden_col{
    display: none;
}

for some reason in Print mode there can be a continuation with CSS styles in print mode on some browser.

Answer 3

What I ended up doing is simply specifying the widths on the cells themselves and not using the <colgroup> anymore at all. Not ideal in my mind, so I'll leave this question open for awhile in case anyone can come up with a better solution, but it did work. Here was my final HTML:

<table>

<tr>
<td width="20" class="hidden_col"><input type="checkbox" /></td>
<td width="50">Title</td>
<td>Longer Description</td>
</tr>

</table>