Even if the cell contains only the image, you should know that the cells in the table have a height calculated in accordance with the position of the baseline of the text; and the current text style affects the calculation of this base position and the spacing between lines after it. You might think that setting “line-height: 1” would be enough to avoid this spacing between the lines, that is, the margin difference that always occurs below each line of text. This is not enough. The easiest solution is to set the “ line-height: 0.8 ” (or lower) for the cell containing the image, so that the default added 0.2% gap is below the baseline (which is still considered the default by default to the absence of text) will make the baseline suitable for cell height. Then you can correctly place the image (or any element of a fixed height) in a cell whose height will determine the height of the cell, without increasing the height of the cell.
Note: with this height line, any text that you placed in this cell will have a baseline only at the bottom of the cell, so the descriptors will overlap the bottom pad, border, border between the current cell, or on the border, indentation or contents of the cell in the next row or contents below the table if the cell was in the last row.
Tested in Google Chrome (current version 15)
Example (HTML5):
<!DOCTYPE html> <html><head> <title>Examples of image transforms (rotations and mirroring)</title> <style> table,tbody,tr,td,image{margin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;} td.z{line-height:0;} </style> </head><body> <table border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td style="border-bottom:hidden">Normal 0° (1,0,0,1,0,0)</td> <td style="border-bottom:hidden">Mirrored 0° (-1,0,0,1,0,0)</td> <td style="border-bottom:hidden">Mirrored 90° (0,1,1,0,0,0)</td> <td style="border-bottom:hidden">Normal −90° (0,1,-1,0,0,0)</td> </tr><tr> <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td> <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td> <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td> <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td> </tr><tr> <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td> <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td> <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td> <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,-1,0,0,0);"/></td> </tr><tr> <td style="border-top:hidden">Mirrored 180° (1,0,0,-1,0,0)</td> <td style="border-top:hidden">Normal 180° (-1,0,0,-1,0,0)</td> <td style="border-top:hidden">Normal 90° (0,-1,1,0,0,0)</td> <td style="border-top:hidden">Mirrored −90° (0,-1,-1,0,0,0)</td> </tr></tbody> </table> </body></html>
Note the trick in the "z" class for table cells (line-height: 0) containing only the image so that they exactly match the size of the image. The images shown in this example are a small square photograph in 8 different orientations. There is only a thin 1px gray border covering each photo, and its label shown above or below, the photos exactly correspond to the cell borders.
Note that the reorientation uses WebKit styles (for Safari and Chrome); You can add equivalent properties for IE and Firefox by changing the prefix; CSS3 does not require a prefix. If these transformations are not supported, the images will not be reoriented / mirrored, but they will still correspond exactly to the cell without additional internal gaps.