My current dilemma can be found on JSFiddle
The issue at hand involves a table nested within a div, where the div has a width of 50%. Ideally, I want the table to occupy the full 100% width of the div.
<div>
<table>
<tr>
<td>Adjust the size and observe the Pixel on the right -></td>
</tr>
</table>
</div>
In terms of CSS:
div {
width: 50%;
background: red;
}
table {
width: 100%;
background: rgb(255,255,255);
}
While this approach functions as intended, there is an occasional display glitch in Chrome. This occurs when resizing the browser window, causing the div's background to peek through due to rounding discrepancies between the div and the table.
For instance, if the div's actual width rounds to 315.5px (based on the 50% width), the table inherits a width of only 315px. As a result, the browser rounds up the div to 316px, creating a 1px disparity with the table. This inconsistency is unique to my experience in Chrome.
Any suggestions on rectifying this situation?