I am experiencing an issue with my document presentation. The document is simple and includes HTML and CSS code as well as some text content. When I render the document, I notice that the table element does not inherit the font size from its parent div, unlike other elements.
Here is a snippet of the code:
<html>
<body>
<style type="text/css">
div.main {
font-size: smaller;
}
</style>
<div class="main">
Lorem ipsum dolor sit amet<br/>
<span>Lorem ipsum dolor sit amet</span>
<div>Lorem ipsum dolor sit amet</div>
<table>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
When I view the rendering, the font size discrepancy between the table element and other elements is noticeable.
My questions are:
Why does the table not inherit the font size from the parent div?
What is the recommended solution to address this issue?