jquery-ui 1.8.18: ui-helper-clearfix bug within table with border spacing

jquery-ui 1.8.18 css style ui-helper-clearfix :after and :before display:table creates unwanted empty space when applied in the context of a table with border collapse and border spacing.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css">
<h3>(1) regular tabs (not in a table) - no problem</h3>
<div class="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>tab 1 content</p>
    </div>
    <div id="tabs-2">
        <p>tab 2 content</p>
    </div>
    <div id="tabs-3">
        <p>tab 3 content</p>
        <p>blah blah</p>
    </div>
</div>


<h3>(2) tab in table without border spacing (border-spacing: 0) and with border-collapse: collapse - no problem</h3>
<table class="withoutBorderSpacing"><tr><td>

<div class="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>tab 1 content</p>
    </div>
    <div id="tabs-2">
        <p>tab 2 content</p>
    </div>
    <div id="tabs-3">
        <p>tab 3 content</p>
        <p>blah blah</p>
    </div>
</div>

</td></tr></table>

<h3>(3) tab in table with border-collapse separate and border-spacing 20px;  Because the new jquery-ui css styles for .ui-helper-clearfix :before and :after are set to display:table (for good reason, I'm sure, but what reason I don't know), we get a lot of unwanted spacing around any element with this (otherwise incredibly useful) class, in Chrome and Firefox (since they support the display:table property/value combination).</h3>
<table class="withBorderSpacing"><tr><td>
    
<div class="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>tab 1 content</p>
    </div>
    <div id="tabs-2">
        <p>tab 2 content</p>
    </div>
    <div...

CSS

table.withoutBorderSpacing
{
    border-collapse: collapse;
    border-spacing: 0;
}

table.withBorderSpacing.workaround .ui-helper-clearfix:before, table.withBorderSpacing.workaround .ui-helper-clearfix:after
{
    display: block;
}

JavaScript

$( ".tabs" ).tabs();