Помогите, пожалуйста, найти ошибку. В имеющемся коде заголовок первой (пустой) таблицы в IE 11 отображается криво. Как сделать, чтобы даже в пустой таблице заголовок выглядел также, как и во второй? Код страницы прилагается.
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test caption</title>
<style>
caption {
display: table-caption;
padding: 5px;
color: #1c3396;
background: #e7e7e7;
border: 1px solid #c9c9c9;
font-weight: bold;
</style>
</head><body>
<h1>Two tables with caption</h1>
<table><caption>Empty table</caption></table>
<br><br><br>
<table><caption>Table with content</caption>
<tr>
<td>One</td><td>2</td><td>100.0%</td>
</tr>
</table>
</body></html>