<!DOCTYPE html>
<html>
<head>
<style>
body { font-size: 13px; font-family: serif; }
table { border: 1px solid red; border-spacing: 0px; padding: 0px; }
th { border: 1px solid red; width: 125px; }
.height20px { height: 20px; }
.height19px { height: 19px; }
.smallerFont { font-size: 10px; }
</style>
</head>
<body>
<p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=37244">37244</a>: thead in table without tbody causes table height doubling</p>
<p>There should not be any gap between the tables' border and the rows'.</p>
<h1>height = 20px</h1>
<table class="height20px">
<tbody>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</tbody>
</table>
<br>
<table class="height20px">
<tbody>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</tbody>
</table>
<h1>height = 19px, font-size = 10px</h1>
<table class="height19px smallerFont">
<tbody>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</tbody>
</table>
<br>
<table class="height19px smallerFont">
<tbody>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</tbody>
</table>
</body>
</html>