@HugoMachado, uma abordagem mais simples seria apenas alterar a visibilidade das colunas.
HTML
<div>
<input id="ckCodigo" name="ckCodigo" type="checkbox" data-type="ckColuna" data-column="codigo" />
<label for="ckCodigo">Código</label>
</div>
<div>
<input id="ckDesignacao" name="ckDesignacao" type="checkbox" data-type="ckColuna" data-column="designacao" />
<label for="ckDesignacao">Designação</label>
</div>
<div>
<input id="ckQuantidade" name="ckQuantidade" type="checkbox" data-type="ckColuna" data-column="quantidade" />
<label for="ckQuantidade">Quantidade</label>
</div>
<table id="table" class="hide">
<thead>
<tr>
<th class="hide" data-column="codigo">Código</th>
<th class="hide" data-column="designacao">Designação</th>
<th class="hide" data-column="quantidade">Quantidade</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hide" data-column="codigo">Código</td>
<td class="hide" data-column="designacao">Designação</td>
<td class="hide" data-column="quantidade">Quantidade</td>
</tr>
<tr>
<td class="hide" data-column="codigo">Código</td>
<td class="hide" data-column="designacao">Designação</td>
<td class="hide" data-column="quantidade">Quantidade</td>
</tr>
<tr>
<td class="hide" data-column="codigo">Código</td>
<td class="hide" data-column="designacao">Designação</td>
<td class="hide" data-column="quantidade">Quantidade</td>
</tr>
</tbody>
</table>
JS
var checkBoxes = $("[data-type='ckColuna']");
var tabela = $("#table");
checkBoxes.click(function () {
if (checkBoxes.filter(":checked").length > 0) {
tabela.removeClass("hide");
} else {
tabela.addClass("hide");
}
var checkBox = $(this);
var celulas = $("table [data-column='" + checkBox.attr("data-column") + "']");
celulas.toggleClass("hide");
});
CSS
.hide {
display: none;
}
Alternativamente você pode colocar o CSS na propria pagina. É aconselhavel faze-lo no cabeçario da pagina. Mas lembresse que o ideal é sempre ter o CSS em um arquivo separado.
HTML - Header
<head>
...
<style type="text/css">
.hide { display: none; }
</style>
...
</head>
JSFIDDLE