With the YUI datatable control you can render a HTML table into a new table with enhanced features such as column hiding. To hide and show columns the CSS style is changed to display:none. One particular problem with hidden columns is, that not the cell itself gets hidden but the div inside the cell. I am guessing that the style display:none is attached to the div inside the cell and not the cell itself because it would render the method showColumn() useless if you use the datatables cellClickEvent.

Maybe you have seen the post JavaScript: Hide and show columns of a YUI dataTable using checkboxes and noticed the ugly border on hidden columns:

yui datatable with ugly border

This is what Firebug outputs after inspecting the element:

yui datatable firebug

As you can see there is a div inside the cell that actually is hidden, not the cell itself. And here is the CSS class for the table cell:

.yui-skin-sam .yui-dt td {datatable.css (line 7)
border-color:-moz-use-text-color #CBCBCB -moz-use-text-color -moz-use-text-color;
border-style:none solid none none;
border-width:medium 1px medium medium;
margin:0;
padding:0;
text-align:left;
}

Notice the border-style:none solid none none part? Try setting it to border-style:none none none none and you will see that the border is not shown anymore. But this will just mess up the table on the positions of the cells compared to the table head part.

So what I needed is to modify the CSS classes so that the table cells of the table and the table head cells will be hidden when the class yui-dt-hidden is applied to it. This is what the table looks like after fixing the CSS classes.

yui datatable css fix

And this is what Firebug displays:

yui datatable css fix firebug

Clearly to see that not only the div inside the cell is hidden by applying style display:none but as well as the table cell itself. Keep in mind that when you have attached the datatables method showColumn() to the cellClickEvent, its complete useless now. Since you can not click in any cell anymore to show the column.

To use this CSS fix I recommend to put these lines into your own CSS file and include this after the YUI CSS files for the datatable.

th.yui-dt-hidden,
tr.yui-dt-odd .yui-dt-hidden,
tr.yui-dt-even .yui-dt-hidden {
display:none;
}

This makes sure that the entire table cells of the table head and the table body will be hidden by applying the yui-dt-hidden style.