CODEWITHSUNDEEP
htmlcss
WillHaack
WillHaack

Reputation: 596

Placing Image in HTML Table

I'm trying to place an image in an HTML table without changing the table borders. What I mean by this is, I'm trying to place the image in a certain cell so that the image stretches outside the cell without increasing the size of the cell (so if there was anything in the way the image would overlap or be overlapped.) By default when I put the image inside the cell it increases the size of the cell so that the text that comes below it gets "pushed down" if you will.

Upvotes: 1

Views: 12646

Answers (4)

Will Reese
Will Reese

Reputation: 2841

You need to make two changes to achieve what you want.

First, apply a width value to your table cell

Second, apply the css display:block to your table cell

<table>
    <tr>
        <td style="width:50px;display:block">
            <img height="100" width="100" src="myImage.jpg" />
        </td>
    </tr>
</table>

Upvotes: 0

Jonas G. Drange
Jonas G. Drange

Reputation: 8845

You can use absolute positioning on the image like in this fiddle: http://jsfiddle.net/8d92j/2/

You can then hide the image or let it overflow. To hide it, use overflow hidden on the <div> and remove absolute positioning on the image.

Upvotes: 3

Johni
Johni

Reputation: 2959

I didn't try this, but setting the cell poition to relative the overflow to visible and the image position to absolute should work.

Upvotes: 0

Matt Stein
Matt Stein

Reputation: 3053

You can specify a width for the table cell and add overflow: visible; to its styles, then the image should just do its thing and push out however far it naturally wants to.

If you want to have the image act independently of everything else in the cell, apply position: relative; to the table cell and position: absolute; to the image. You can then use top, right, bottom, and/or left values accordingly to nudge the image around relative to its (table cell) container.

Upvotes: 2

Related Questions