[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 140
  • Last Modified:

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?
0
maqskywalker
Asked:
maqskywalker
3 Solutions
 
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now