Bootstrap's clearfix doesn't work inside tables

Question

I'm working with a complex table that eventually gets a form inside a row which uses the Bootstrap's grid system on it.

The problem is that the col-* classes floats so we need to add .clearfix to the parent container to make it not ignore the content's height. Well, just try to use .clearfix inside a table and you'll see that the :before and :after elements used by the fix gets a unwanted height resulting in some kind of padding in the container.

Here's a little piece of code showing a cell structure with the clearfix bug:

<td colspan="4">    
    <div class="clearfix">
        <div class="col-xs-4">
            <input name="name">
        </div>
        <div class="col-xs-8">
            <input name="nickname">
        </div>
    </div>
</td>

Answer 1

After reading an explanation on how .clearfix works, I've removed some unnecessary stuff and managed to create an alternative class that works inside elements with display:table; too:

.clearfixfix {
  content: "";
  clear: both;
  display: block;
}

Only tested in chrome for now.