Я конечно понимаю, что кроссбраузерность зло в наше дни
Да и извращения все любят.
Но чем вот так не работает:
<style>
.first-col {
background: red;
}
.second-col {
background: blue;
}
table {
width: 100%;
}
td {
height: 30px;
padding: 0;
}
.hide-some-col .second-col {
width: 0;
}
</style>
<table id="my-table">
<col class="first-col">
<col class="second-col">
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
<a href="" onclick="document.getElementById('my-table').className = 'hide-some-col'; return false">Click me</a>