| <!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> |
