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&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;
}