I am working on a HTML table that has a width set to 100%. This table consists of two rows, each with two cells. Inside each cell, there is an image with a width of 100% and height set to auto, allowing the image to scale proportionally within the cell.
Here is the HTML code snippet:
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="http://idevicegazette.com/wp-content/uploads/2013/03/htc-one-sample-002-200x200.jpg" />
<div class="info"></div>
</td>
<td>
<img src="http://idevicegazette.com/wp-content/uploads/2013/03/htc-one-sample-002-200x200.jpg" />
<div class="info"></div>
</td>
</tr>
<tr>
<td>
<img src="http://idevicegazette.com/wp-content/uploads/2013/03/htc-one-sample-002-200x200.jpg" />
<div class="info"></div>
</td>
<td>
<img src="http://idevicegazette.com/wp-content/uploads/2013/03/htc-one-sample-002-200x200.jpg" />
<div class="info"></div>
</td>
</tr>
</table>
And here is the CSS style applied to it:
table
{
width: 100%;
}
table td
{
width: 50%;
position relative;
}
img
{
width: 100%;
height: auto;
}
To address a specific issue, I have created a JSFiddle (recommended use in Chrome):
If you resize the window in the result area, you may notice that the images in the right column can be 1 pixel smaller than those in the left column. My goal is to ensure all images maintain the exact same size, regardless of the column they are in.
I understand that this problem arises when the table width is an odd number of pixels, leading to slight discrepancies in image sizes. I am seeking a workaround to address this issue.