Question

I have set up a nice table with fixed height and weight like this:

<table border="1" bordercolor="#ccc" style="background-color:#FFFF" width="650" height="322" cellpadding="0" cellspacing="22">
    <tr>
        <td align="center"></td>
                <td align="center"></td>
                        <td align="center"></td>
                                <td align="center"></td>
                                        <td align="center"></td>
    </tr>
    <tr>
        <td align="center"></td>
                <td align="center"></td>
                        <td align="center"></td>
                                <td align="center"></td>
                                        <td align="center"></td>
    </tr>
    <tr>
        <td align="center"></td>
                <td align="center"></td>
                        <td align="center"></td>
                                <td align="center"></td>
                                        <td align="center"></td>
    </tr>
</table>

So the cells (td) have a height and width of x and x (according to the height/width of the table)
The cells have pretty much the same dimensions. The problem is that whenever I put an img inside the cells they expand to adjust there dimensions for this. I put the img like this:

<td align="center"><img src=someimage.png></td>

What I want is to keep the dimensions of the cells whatever img I put in. So if the img is bigger than the cell it would keep its dimensions and the img would simply ”flow over” the cell.
I would really prefer to do this with CSS, but if that is impossible than I whant to try Javascript (preferably Jquery).

Answer 1

You could always make them background-images of the tds they occupy. They wouldn’t “flow over” the cell borders. (Not sure what that means.)