Hide column (IE8 bug)

by Bruno G.

HTML

<div>
    <label for="colIndex">Column Index(1-6): <input value="4" style="text-align: right;" id="colIndex"/></label>
        <button onclick="hideColumn(false)">Hide column</button>
        <button onclick="hideColumn(true)">Hide with IE8 fix</button>
        <button onclick="showColumn()">Show column</button>
</div>
<div id="fiche">
<table style="table-layout: fixed; width: 100%;" id="table1" border="1">
	<colgroup>
		<col class="colDatFR"/>
		<col class="colGrm"/>
		<col class="colSep x-EN"/>
		<col class="colDat x-EN"/>
		<col class="colSep x-ES"/>
		<col class="colDat x-ES"/>
	</colgroup>
                <tbody>
<tr>
                                <td>Data1</td>
                                <td>Data2</td>
                                <td>Data3</td>
                                <td>Data4</td>
                                <td>Data5</td>
                                <td>Data6</td>
                        </tr>
<tr>
                                <td>Data1</td>
                                <td>Data2</td>
                                <td>Data3</td>
                                <td>Data4</td>
                                <td>Data5</td>
                                <td>Data6</td>
                        </tr>
<tr>
                                <td>Data1</td>
                                <td>Data2</td>
                                <td>Data3</td>
                                <td>Data4</td>
                                <td>Data5</td>
                                <td>Data6</td>
                        </tr>
<tr>
                                <td>Data1</td>
                                <td>Data2</td>
                                <td>Data3</td>
                                <td>Data4</td>
                                <td>Data5</td>
                                <td>Data6</td>
                        </tr>
<tr>
                                <td>Data1</td>
                                <td>Data2</td>
    ...

CSS

#fiche .mrg {padding:5px 30px 0}
#fiche .Ttrms, #fiche .Tges {width:100%}
.ie9 #fiche .Ttrms, .ie10 #fiche .Ttrms, .ie #fiche .Tges {table-layout:fixed}
#fiche p, #fiche td {font-size:10pt;padding:0;vertical-align:top}
#fiche a {text-decoration:underline}
#fiche .sep {background-color:#09295c;height:1px;margin-top:15px;width:100%}
.ie #fiche .colDatFR {min-width:25%}
.ie #fiche .colGrm {width:7%}
#fiche .colSep {width:2%}
#fiche .colDat {min-width:32%}
.ie #fiche .colDat {min-width:31%}
#fiche .rnv, #fiche .dte {font-size:0.85em;font-weight:normal;color:#5b86e7;white-space:pre}
#fiche .cla, #fiche .sec, #fiche .sec2 {color:#5d88b3}
#fiche .cla {white-space:nowrap}
#fiche .thmb {float:right}
#fiche .sec {padding-top:15px}
#fiche .trm {font-size:1.25em;font-weight:bold;color:#003f61}
#fiche .trm .rnv {font-size:0.7em}
#fiche .grm {padding:3px 10px 0;font-size:0.85em;font-weight:normal}
#fiche .jus {margin-top:6px}
#fiche .nteT {margin-top:15px}
#fiche .nteT span {text-decoration:underline}
#fiche .src {width:1.8em}
#fiche .srcl {padding-right:0.5em}
#fiche .srci {margin-right:20px}
#fiche .ges, #fiche .his {color:#000}
#fiche .his {font-size:0.85em}
#fiche .lgd {float:right;margin-right:1em;text-align:right;list-style-type:none}
#fiche .bri, #fiche .bri_adj {color:inherit}
#fiche .prnt {display:none}

/* Ajustements styles LTW */
#fiche .toggleLnk {padding-top:2px}

JavaScript

function hideColumn(bFix) {
	var colNumber = document.getElementById("colIndex").value;
	if ( isNaN(colNumber) || colNumber>=6 || colNumber<=0 ) return;
    var table1 = $('#table1');
    var cols = table1.find('colgroup > col').filter(':nth-child('+colNumber+')');
    cols.prop('visibility', 'collapse');
/*	if ( bFix ) {
		// Solution for IE8 standards mode.
		table1.css('display', 'inline-table');
		window.setTimeout(function(){table1.css('display', '');},0);
	}*/
}

function showColumn() {
	var colNumber = document.getElementById("colIndex").value;
	if ( isNaN(colNumber) || colNumber>=6 || colNumber<=0 ) return;
    var table1 = $('#table1');
    var cols = table1.find('colgroup > col').filter(':nth-child('+colNumber+')');
    cols.prop('visibility','');}