Table caption appears inside outline in some browsers, outside in others

Question

I am putting a border and outline around a table. It works fine in latest IE and Firefox, but Chrome is putting the outline around my captions as well. In IE and Firefox the outline only displays around the table, which is what I want. How to fix this in Chrome?

Demo: http://jsfiddle.net/R7aTq/17/

HTML

<table align="center" cellspacing="1" class="homepagemodule  report" id="trades">
    <caption><span>Pending Trades</span></caption>
    <tbody>
        <tr>
            <th>Currently Outstanding Trades</th>
        </tr>
        <tr class="oddtablerow">
            <td>
                <ul>
                    <li>0 trades proposed by me to others</li>
                    <li>0 trades proposed by others to me</li>
                    <li><a href="http://football21.myfantasyleague.com/2013/options?L=56019&amp;O=05">View trades now</a></li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

CSS

Table caption appears inside outline in some browsers, outside in others.

caption {
    color: #333;
    font-weight: 400;
    font-size: 12pt;
    background: none;
    text-align: center;
}
.report {
    width: 300px;
    background: #ccc;
    border: 2px solid #fff;
    outline: 1px solid #000;
}

Answer 1

You need to take the outline and move it to tbody. Outline is used to show focus on an element, the whole element. Chrome sees the whole element as table which caption is a child of so it puts the outline around all of it.

Remove outline from your report class and add a new class or new style to tbody that sets the outline.

EDIT

Add in display:block; that seems to fix it.

updated the proof: http://jsfiddle.net/R7aTq/83/

Or you could get rid of tables all together and use divs like in this fiddle:

non-table version: http://jsfiddle.net/R7aTq/130/