[Bug] Bad column width when some of the columns are collapsed (hidden)

[ioleo]

I've applied this plugin to a table with:

table td,
table th {
    display: none; /* hide all cells */
}

table td.row-label,
table th.row-label,
table td.active,
table th.active {
    display: table-cell !important; /* except label and active cells */
}

So the markup:

<table>
  <thead>
    <tr>
        <td class="row-label">Employee</td>
        <td class="product1 active">product1 sales</td>
        <td class="product2">product2 sales</td>
        <td class="product3">product3 sales</td>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td class="row-label">Rob Zombie</td>
        <td class="product1 active">5</td>
        <td class="product2">3</td>
        <td class="product3">7</td>
    </tr>
  </tbody>
</table>

Which will display:

+------------+----------------+
| Employee   | product1 sales |
+------------+----------------+
| Rob Zombie |              5 |
+------------+----------------+

Then I added 3 tabs (Product1, Product2, Product3) which with some js (twitter bootstrap's tab) add/remove the active class from cells (so you can hide "product1" column and show "product2" column instead).

However, the "padding-right" that was applied to last cell approach does not work, when some cells are hidden. The cell widths are not correct. Eg:

<tr>
    <td class="row-label"></td>
    <td class="product1 active"></td> <!-- this cell is the last displayed cell, but it does not have the padding -->
    <td class="product2"></td> <!-- hidden -->
    <td class="product3"></td>  <!-- the right padding was added to last cell, but this cell is not displayed -->
</tr>

Since dynamicaly adding/removeing padding from visible/hidden cells would be a pain in the ass and could cause more problems, instead I've moved the padding to the div wrapper which solves the problem.

Ofcourse, this makes the scrollbar appear "outside" the table, but that could be fixed by applying borders to fht-table-wrapper and removeing outer borders from the table.