css to place image in corner of html table cell.

Hi experts,

I'm using jquery in a html page.

I have this fiddle
http://jsfiddle.net/880981gv

if you notice in column 4 of row one I have placed an image.

How do I fix my fiddle so that the image is located on the top right corner of the cell it's currently in?
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Alexandre SimõesManager / Technology SpecialistCommented:
Adding this CSS will work for all cells:
#Table1 tbody td {
  position: relative;
}
#Table1 tbody td img {
  position: absolute;
  top:0;
  left: 0;
}

Open in new window

If you don't want to mess with the td style directly, you can wrap the contents of each cell in a div and style it instead.

Cheers,
Alex
1
 
Kim WalkerWeb Programmer/TechnicianCommented:
Setting the text-align to right and the vertical-align to top would do it.
#row1 .col4 {
    text-align: right;
    vertical-align: top;
}

Open in new window

0
 
Amita SinghWeb DeveloperCommented:
#row1 .col4 img{
      float: right;
    margin-top: -24px;
}
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate,
you have 3 options here, all valid but with different outcomes depending on what else you have on the cell.

Is there anything else preventing you from closing the question?

Cheers,
Alex
0
 
maqskywalkerAuthor Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.