Here's the issue I'm facing:
I have an HTML <table> with a fixed height of 100px and no border. Inside this table, there is one row (with a 100% height) containing 5 td elements (each also with a height of 100%). Within each td, there is a div element with position set to relative and height at 100%.
Upon inspecting the structure using Chrome dev tools, I noticed that the div's height is slightly smaller than the table. How can I ensure that the div's height matches the table?
I attempted adjusting the cellpadding to -2px, but it didn't resolve the issue. I don't typically work with tables, so please excuse my limited knowledge in this area :/
Thank you for your assistance.
Edit: Here is my source code:
<table>
<tr>
<td>
<div>text 1</div>
</td>
<td>
<div>text 1</div>
</td>
<td>
<div>text 1</div>
</td>
</tr>
</table>
and the CSS:
table{
padding: 0;
margin: 0;
height: 100px;
width: 100%;
}
tr,
td{
padding: 0;
margin: 0;
height: 100%;
width: 200px;
}
td > div{
padding: 0;
margin: 0;
position: relative;
height: 100%;
width: 100%;
}